Code block title

Renders a visible filename or label above a fenced code block from the title= meta attribute.

CodeTitlePlugin is always active. It reads the title="…" token from a fenced code block’s info string and renders a <div class="code-title"> label immediately above the block.

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-title">zfb.config.ts</div>
<pre class="syntect-…"><code>…</code></pre>

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 before syntect erases it.

See also

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