コードブロックのタイトル

title= メタ属性を持つフェンス付きコードブロックを、表示されるファイル名やラベル付きのコンテナで包む。

CodeTitlePlugin は常に有効です。フェンス付きコードブロックの情報文字列から title="…" トークンを読み取り、描画されたブロックを .code-block-container で包み、.code-block-title の後に <pre> を続けます。

使い方

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

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

描画される出力:

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

設定

常に有効で、設定キーはありません。

順序に関する注意

CodeTitlePlugin は hast フェーズで SyntectPlugin の前に実行されます。 SyntectPlugin は <pre> 要素全体を生の HTML フラグメントに置き換えるため、 それが起きると title="…" を保持する data-meta 属性は構造化された AST として 到達できなくなります。CodeTitlePlugin を先に実行することで、syntect が メタ情報を消去する前にそれを読み取り、コンテナを作成し、その内側の <pre> を syntect が後からハイライトできるようにしています。

関連項目

• シンタックスハイライト — このプラグインの後に 実行される syntect プラグイン。