Code Blocks

Syntax-highlighted fenced code blocks powered by zfb's semantic class mode, with support for titles, line highlighting, and diff display.

Fenced code blocks in zudo-doc use zfb's build-time semantic class-mode highlighter. 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

zfb's class-mode highlighter supports a wide range of languages. 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 zfb's class-mode renderer. It emits semantic classes such as hi-kw and hi-str beneath pre.hi-root; zudo-doc maps those roles to its current --zd-syntax-* design tokens. Document fences therefore follow the active color scheme without inline palette colors or client-side JavaScript. HtmlPreview's lazy WASM renderer emits the same class and token contract.