**Core 機能** — 常に有効です。設定は不要です。

## 概要

コードフェンスの言語識別子の後に `title="…"` 属性を付与すると、コードブロックの上にファイル名またはタイトルのラベルバーがレンダリングされます。

`title` 属性がない場合は、コンテナや見出しなしのベアな `<pre>` 要素としてレンダリングされます。

## 構文

開始フェンスの言語タグの後に `title="…"` を追加します。

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

このように表示されます。

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

## 出力マークアップ

タイトル付きのコードブロックはコンテナ `div` にラップされます。

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

タイトルなしのコードブロックはラッパーなしのベアな `<pre>` としてレンダリングされます。

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

## 補足

- これはビルドパイプラインのシンタックスハイライターより**前に**実行されます。これにより、`<pre>` 要素がハイライト済み HTML に置き換えられる前に `title` メタデータが取得されます。オプトイン機能である [Code Enrichment](https://zudo-doc.takazudomodular.com/ja/docs/markdown-features/code-enrichment)（`codeEnrichment`）とは独立しています — その機能はシンタックスハイライトの*後*に実行され、すでにハイライト済みの出力に diff マーカー・行ハイライト・単語ハイライトの装飾を追加するものであり、タイトルバーは追加しません。どちらの機能も互いに依存しません。
- UI に表示されるコピーボタンと折り返しボタンはクライアントサイドの JavaScript で注入されるもので、SSR 出力には含まれません。これらはオプトイン機能である [Code Enrichment](https://zudo-doc.takazudomodular.com/ja/docs/markdown-features/code-enrichment) の有効・無効にかかわらず、ハイライト済みのすべてのコードブロックに自動的に追加されます — Code Enrichment が追加するのは diff マーカー・行ハイライト・単語ハイライトの装飾のみです。