Code block title

Wraps a titled fenced code block in a code-block container with a visible filename or label.

CodeTitlePlugin is always active. It reads the title="…" token from a fenced code block's info string and wraps the rendered block in a .code-block-container with a .code-block-title followed by the <pre>.

Usage

Add title="…" after the language tag in the fence:

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

Rendered output:

<div class="code-block-container">
  <div class="code-block-title">zfb.config.ts</div>
  <pre class="syntect-…"><code>…</code></pre>
</div>

Config

Always on, no config key.

Ordering note

CodeTitlePlugin runs before SyntectPlugin in the hast phase. SyntectPlugin replaces the entire <pre> element with a raw HTML fragment; once that happens, the data-meta attribute carrying title="…" is no longer reachable as structured AST. Running CodeTitlePlugin first ensures it reads the meta, creates the container, and leaves the inner <pre> for syntect to highlight afterward.

See also

• Syntax highlighting — the syntect plugin that runs after this one.