Syntax highlighting

Syntax highlighting is a separate package so applications that do not need Shiki do not download it. Without a highlighter, fenced blocks render as ordinary <pre><code> with no toolbar.

Install @smoothstream/code next to your adapter and pass codeHighlighter.

npm install @smoothstream/code

pnpm add @smoothstream/code

yarn add @smoothstream/code

bun add @smoothstream/code

import { Smoothstream } from "@smoothstream/react";import { codeHighlighter } from "@smoothstream/code"; <Smoothstream codeHighlighter={codeHighlighter} receiving={receiving}>  {text}</Smoothstream>

<script setup lang="ts">import { Smoothstream } from "@smoothstream/vue";import { codeHighlighter } from "@smoothstream/code";</script> <template>  <Smoothstream    :markdown="text"    :receiving="receiving"    :code-highlighter="codeHighlighter"  /></template>

import { createSmoothstream } from "@smoothstream/dom";import { codeHighlighter } from "@smoothstream/code"; createSmoothstream(container, {  receiving: true,  codeHighlighter,});

Attaching a highlighter also opts fenced blocks into Smoothstream’s code surface: a language label and a copy button. The copy control mounts when the block is confirmed complete, including when input closes without an explicit closing fence. It copies the full raw code even if the visual reveal is still running.

Choose a theme

codeHighlighter is a ready-made instance using Shiki’s github-light theme. Create your own for a different bundled theme, hidden labels, or paired light and dark themes.

import { createCodeHighlighter } from "@smoothstream/code"; const codeHighlighter = createCodeHighlighter({  theme: "vitesse-light",});

const codeHighlighter = createCodeHighlighter({  showLanguageLabels: false,});

theme and themes are mutually exclusive. For applications with light and dark color schemes, pass Shiki’s themes API:

const codeHighlighter = createCodeHighlighter({  themes: {    light: "vitesse-light",    dark: "vitesse-dark",  },  defaultColor: "light-dark()",});

defaultColor follows Shiki: "light" (default), "dark", "light-dark()", or false. The light-dark() strategy follows the nearest CSS color-scheme. Class-based toggles should update that property:

html {  color-scheme: light;} html.dark {  color-scheme: dark;}

Token styles also keep Shiki’s --shiki-light and --shiki-dark variables if you prefer selector-based switching.

Reuse the highlighter

Create a configured highlighter once, outside component render functions. It caches theme and language loading and separates tokenizer state by code-block session. The same instance can serve multiple responses.

Use paired themes for a live color-scheme toggle instead of replacing the highlighter during a response. Previously accepted code lines preserve their styles; a dual-theme result already contains the values CSS needs for both appearances.

For label size, copy-button dimensions, or code-surface overrides, see CSS variables. For a different tokenizer or custom grammar-loading infrastructure, implement a custom highlighter.