Code Title

作成 2026年5月28日更新 2026年7月24日Takeshi Takatsudo

コードブロックに title="…" を設定すると、ファイル名や見出しバーを表示します。

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

概要

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

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

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

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

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

zfb.config.ts

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

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

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

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

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

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