Code block
A block of code in a reply — its file name, its language, a copy button — highlighted as it streams when a highlighter is installed.
-
type: 'code'
<aparte-chat-bubble message-id="a1" data-role="assistant" name="Assistant"></aparte-chat-bubble>
<script>
document.querySelector('aparte-chat-bubble').setSegments([
{ id: 's1', type: 'text', content: 'The minimal wiring:' },
{
id: 's2',
type: 'code',
language: 'ts',
filename: 'chat.ts',
content: [
"import { AparteClient, aparteGlobalConfig, AparteDirectTransport } from '@aparte/core';",
'',
'aparteGlobalConfig.setTransport(new AparteDirectTransport({ byok: true }));',
'new AparteClient().start();',
].join('\n'),
},
]);
</script>A fenced block in a model’s reply becomes a code segment of its own, with a header that shows
the file name when there is one, the language, and a copy button. The button copies the source,
never the highlighting markup.
Highlighting is a plugin. With one installed, the block is coloured while it streams, not only once the reply has ended.
Variants
Section titled “Variants”With no highlighter installed
Section titled “With no highlighter installed”<!-- Highlighting is a plugin (@aparte/plugin-shiki). Without one the block stays
plain, with its language and its copy button. -->
<aparte-chat-bubble message-id="a1" data-role="assistant" name="Assistant"></aparte-chat-bubble>
<script>
document.querySelector('aparte-chat-bubble').setSegments([{
id: 's1',
type: 'code',
language: 'ts',
content: "const transport = new AparteBackendTransport({ endpoint: '/api/chat' });",
}]);
</script>The block keeps its header and its copy button, and still wraps its long lines; only the colours are missing.
import { setupShikiProvider } from '@aparte/plugin-shiki';
await setupShikiProvider({ theme: { light: 'github-light', dark: 'github-dark' } });A theme pair follows the chat’s light and dark themes. shiki is a peer dependency. This entry
brings every grammar Shiki has, each loaded when first needed; to ship only the languages you
use, build a highlighter yourself and pass it to setupShikiProviderFromHighlighter() from
@aparte/plugin-shiki/core. Markdown and code
has both.
Customize
Section titled “Customize”Another highlighter (Prism, highlight.js) plugs in with
aparteGlobalConfig.setHighlightProvider(fn), which takes the code and its language and returns
HTML, now or as a promise. The header is drawn from --aparte-code-header-bg,
--aparte-code-header-text and --aparte-code-border; the
CSS variables reference lists the rest.
Fields
Section titled “Fields”AparteCodeSegment, discriminated by type: 'code'.
| Field | Type | Required | Description |
|---|---|---|---|
content | string | yes | |
language | string | — | |
filename | string | — | |
showLineNumbers | boolean | — |
Accessibility
Section titled “Accessibility”- The copy button is named from the
copylocale key, and fromcopiedfor a moment after a click, so the confirmation is heard as well as seen. - The language is written in the header as text.