**Core feature** — always active, no configuration required.

## What it does

When a fenced code block includes a `title="…"` attribute after the language identifier, a label bar is rendered directly above the block showing the filename or title.

Without a `title` attribute the code block renders as a bare `<pre>` element, with no container or label.

## Syntax

Add `title="…"` after the language tag on the opening fence:

````md
```ts title="zfb.config.ts"
export default defineConfig({
  markdown: {
    cjkFriendly: true,
  },
});
```
````

This produces:

```ts title="zfb.config.ts"
export default defineConfig({
  markdown: {
    cjkFriendly: true,
  },
});
```

## Emitted markup

A code block with a title is wrapped in a container `div`:

```html
<div class="code-block-container">
  <div class="code-block-title">zfb.config.ts</div>
  <pre class="hi-root"><code>…</code></pre>
</div>
```

A code block without a title renders as a bare `<pre>` with no wrapper:

```html
<pre class="hi-root"><code>…</code></pre>
```

## Notes

- This runs **before** the syntax highlighter in the build pipeline, so the `title` metadata is captured before the `<pre>` element is replaced with highlighted HTML. It is independent of the opt-in [Code Enrichment](https://zudo-doc.takazudomodular.com/docs/markdown-features/code-enrichment) feature (`codeEnrichment`): that feature runs *after* syntax highlighting and adds diff-marker, line-highlight, and word-highlight decorations to the already-highlighted output — it does not add the title bar, and neither feature depends on the other.
- The copy and word-wrap buttons visible in the UI are injected by client-side JavaScript and are not part of the SSR output. They are added to every highlighted code block automatically, independent of whether the opt-in [Code Enrichment](https://zudo-doc.takazudomodular.com/docs/markdown-features/code-enrichment) feature is enabled — that feature only adds diff-marker, line-highlight, and word-highlight decorations.