[ma91n]

close #473

VitePress は情報行の [title] を ::: code-group の中でしか使わない（extractTitle を呼ぶのは createCodeGroup だけ）。単独のフェンスでは extractLang が空白以降を捨てるので、ファイル名はどこにも出ないまま落ちる。

起票時の数え方を訂正

issue には「16 本ともファイル名が表示されていない」と書いたが、実際に数え直すと [title] の 11 本はすべて ::: code-group の中で、既にタブとして出ていた。落ちていたのは以下。

形	本数	場所
空白区切り（技術ブログの記法 #2843）	6	forGitBranch ×4（sh .gitattributes）、forIF（csv 注文）、forTerraform（sh リモートステートのpull、編集、push、削除）
[title]、code-group の外	2	forMarkdown/sample の取り込みスニペット（<<< @/…/openapi.yaml{yaml}）。VitePress が付ける取り込み元のファイル名が消えていた

この PR で 8 本にファイル名が出る。

作り

lib/markdown-it-plugin-fence-title.mjs が fence レンダラを包み、空白区切りと [title] の両方を読む。

• ::: code-group の中は触らない。タブが既に名乗っているので二重になる（トークンを遡って container_code-group_open を探す）
• {1,3} / :line-numbers / =5 / twoslash / vue は VitePress の指定なのでファイル名として扱わない（原稿には 1 件も無いが、書かれたときに壊れないように）
• mermaid より前に包んで、mermaid のプラグインが外側に残るようにしている

見た目は右上の言語ラベル（span.lang）を左右で鏡にした形。位置は pre の上の余白（20px）の中で、左端はコードの文字（code の padding: 24px）にそろえる。言語ラベルはカーソルを乗せるとコピーボタンに譲って消えるが、ファイル名はブロックの名前なので消さない。 色は言語ラベルより一段強い段（--vp-c-text-2。コードの地で 5.62 / 暗い側 6.31）。

::: code-group のタブが壊れていないことは確認済み（data-title 8 件が before と同じ）。

確認

• documents/forGitBranch/git_setup_guidelines.html … .gitattributes が 4 か所
• documents/forIF/if_guidelines.html … 注文
• documents/forMarkdown/sample/api_reference.html … openapi.yaml（取り込みスニペット）
• 変わらないことの確認: documents/forTerraform/terraform_guidelines.html の code-group のタブ

forTerraform の リモートステートのpull、編集、push、削除 はファイル名ではなく説明文で、タブに出ると長い。原稿を直すかは別（この PR では出したまま）。

🤖 Generated with Claude Code

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[ma91n]

ファイル名と中身が近すぎたので直した（追加コミット）。

原因: 言語ラベル（span.lang）と同じように pre の上の余白（20px）へ絶対配置で浮かせていた。ラベルは 12px なので、名前の下端（y=16.4）とコードの 1 行目（y=20）の間が 3.6px しか空かず、名前が中身に貼り付いていた。

直し: 流し込みに戻した（position: absolute → display: block）。pre がもとから持っている上の余白 20px が、そのまま名前と中身の間隔になる。

	before	after
名前と 1 行目の間	3.6px	20px
ブロックの高さ	—	＋18.8px

上端（2px）と右の余白は言語ラベルに合わせたままなので、名前と言語ラベルは同じ行に並ぶ。