Code Title

Renders a filename or title bar above a fenced code block when title="…" is set.

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:

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

This produces:

export default defineConfig({
  markdown: {
    cjkFriendly: true,
  },
});

Emitted markup

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

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

<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 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 feature is enabled — that feature only adds diff-marker, line-highlight, and word-highlight decorations.