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 only after the closing fence is known. 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.