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.

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

````mdx
```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:

| Language | Identifier |
| -------- | ---------- |
| TypeScript | `ts`, `typescript` |
| JavaScript | `js`, `javascript` |
| HTML | `html` |
| CSS | `css` |
| JSON | `json` |
| Bash / Shell | `bash`, `sh`, `shell`, `zsh` |
| Markdown | `md`, `markdown` |
| MDX | `mdx` |
| YAML | `yaml`, `yml` |
| Python | `python`, `py` |
| Rust | `rust`, `rs` |
| Go | `go` |
| SQL | `sql` |
| GraphQL | `graphql` |
| Diff | `diff` |
| TOML | `toml` |
| JSX / TSX | `jsx`, `tsx` |

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.

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

````mdx
```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.

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

````mdx
```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
````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.