Syntax Highlighting

Build-time code highlighting via syntect, with dual light/dark themes that follow the active color scheme.

Core feature — always active, no configuration required.

What it does

Every fenced code block is highlighted at build time using syntect, a Rust library that uses Sublime Text–compatible grammar definitions. The highlighted HTML is embedded directly in the SSR output — no JavaScript is required in the browser.

Theme

zudo-doc highlights code in dual-theme mode: a light theme (base16-ocean.light) and a dark theme (base16-ocean.dark), set via codeHighlight.themeLight / codeHighlight.themeDark in zfb.config.ts.

Rather than baking one theme's colors as inline color:#hex (the single-theme default — unreadable on the opposite background), syntect highlights twice and emits each token's two colors as CSS custom properties: --shiki-light and --shiki-dark. The stylesheet resolves them with light-dark(), driven by the same color-scheme property the theme toggle sets, so code follows the light/dark switch with no client-side JavaScript. All <pre> elements receive the class syntect-dual.

Theme names are syntect built-ins (e.g. base16-ocean.light, InspiredGitHub, Solarized (dark)), not Shiki theme names.

Supported languages

Any language with a Sublime Text–compatible grammar is supported. Specify the language identifier on the opening fence:

```ts
const greeting: string = "hello";
```

Renders as:

const greeting: string = "hello";

Without a language identifier, the block is rendered as plain text with no highlighting.

Emitted markup

A highlighted code block renders as:

<pre class="syntect-dual" style="--shiki-light-bg:#eff1f5;--shiki-dark-bg:#2b303b">
  <code><span style="--shiki-light:#4f5b66;--shiki-dark:#c0c5ce">…</span></code>
</pre>

When used together with the Code Title feature, the <pre> is wrapped inside a .code-block-container div. The copy button visible in the UI is injected by client-side JavaScript (part of the opt-in Code Enrichment feature).

Processing order

The syntax highlighter runs last in the hast phase, after Code Title and any other code-block plugins. It replaces each <pre><code> element with raw highlighted HTML, so any plugin that needs to read the structured <pre> element must run before it.

Notes

• Highlighting is performed entirely by Rust at build time; no Shiki, Prism, or other JS highlighter runs at build or serve time. Dual-theme switching is pure CSS (light-dark() over the emitted custom properties), so it needs no JS either.

• The shikiTheme field in color-scheme config is unrelated and has no effect on build output: it is a vestigial field carried in the design token panel's color-scheme envelope (optional since zdtp 0.2.3), and the panel's Shiki preview is a no-op stub.