Code Blocks

Syntax-highlighted fenced code blocks powered by syntect, with support for titles, line highlighting, and diff display.

Fenced code blocks in zudo-doc are powered by syntect, a Rust-native syntax highlighter run during the build by the zfb engine. Specify the language after the opening fence to activate highlighting.

Basic Usage

Wrap code in triple backticks and add a language identifier after the opening fence.

function add(a: number, b: number): number {
  return a + b;
}

```ts
function add(a: number, b: number): number {
  return a + b;
}
```

Supported Languages

syntect ships a wide range of languages out of the box. Common identifiers:

If a language identifier isn't recognised, the block falls back to a plain unhighlighted render — the surrounding container styling and copy/word-wrap controls still apply.

Code Block Title

Add a title meta attribute to display a filename or label above the code block.

export function multiply(a: number, b: number): number {
  return a * b;
}

```ts title="src/utils/math.ts"
export function multiply(a: number, b: number): number {
  return a * b;
}
```

Diff Highlighting

Use the diff language to show added and removed lines with + and - prefixes.

- const greeting = "Hello";
+ const greeting = "Hello, world!";
  console.log(greeting);

```diff
- const greeting = "Hello";
+ const greeting = "Hello, world!";
  console.log(greeting);
```

Nested Code Blocks

When you need to show a fenced code block inside an MDX example, use four backticks for the outer fence and three for the inner block.

````mdx
```ts
const x = 1;
```
````

Syntax-highlight Theme

The build-time highlighter is syntect, configured in dual-theme mode (codeHighlight.themeLight/themeDark in zfb.config.ts — base16-ocean.light / base16-ocean.dark). Each token's two colors are emitted as --shiki-light / --shiki-dark CSS custom properties (not inline color:#hex), and the stylesheet resolves them with light-dark() so code follows the active light/dark theme with no client-side JavaScript.

The shikiTheme field on a color scheme is unrelated to this and has no effect on the rendered page: it is a vestigial field carried in the zdtp panel's color-scheme envelope (@takazudo/zdtp; optional since zdtp 0.2.3). The panel does not re-highlight code — its Shiki integration is a no-op stub.