【vscode】マークダウンのコードブロックにファイル名を表示する

Visual Studio CodeのMarkdownのプレビュー機能にて、コードブロック（code block）にファイル名を表示するには、以下の拡張機能を導入します：

使い方

マークアップの方法は、以下のように、言語名のあとにコロン:で区切ってファイル名を書きます：

~~~css:./hoge/style.css
body {
  color: #abc;
}
~~~

※はてなブログだと、コードブロックの中でバッククォート`を3つ書くことができなかったので、代わりにチルダ~で書いています。ちなみに、コードブロックにはバッククォートが一般的ですが、代わりにチルダも使えます。これは余談ですが。

上記の拡張機能の標準スタイルでは、以下のようにプレビューされます（右側）。

言語名指定なしだとうまくプレビューされないので、シンタックスハイライトが不要の場合は適当にtxtとかを指定しておきましょう。

なお、上で少し書いた通り、コードブロックのマークアップにはバッククォート`の代わりにチルダ~を用いることもできます。

そのおかげで、上の画像の4つめのコードブロックの例のように、ファイル名（パス）に~を含めると、エディタ中のシンタックスハイライト（syntax highlighting）が乱れます。

該当行のトークンを表示していますが、期待通りになっていないのがわかります。

ちなみに、スコープインスペクタを表示するには、cmd + P（ctrl + P on windows）で表示される検索窓にDeveloper: Inspect Editor Tokens and Scopesと入力すれば見つけられます。標準ではキーバインドは用意されていません。参考。

実際、vscode標準搭載（built-in）のmarkdownのsyntax設定のソースを見てみると、コードブロック開始は以下のような正規表現でキャプチャされています：

"fenced_code_block_css": {
  "begin": "(^|\\G)(\\s*)(`{3,}|~{3,})\\s*(?i:(css|css.erb)((\\s+|:|,|\\{|\\?)[^`~]*)?$)",

ファイル名にマッチングする箇所は[^`~]*となっているので、`と~は含められないことがわかります。

このソースは以下のリポジトリで見ることができます：

はじめに紹介した拡張機能のリポジトリは以下です：

vscode自体がJavaScriptで作られているので、vscodeで使われているmarkdownパーサももちろんJS製です。つまり、markdown-itですね。

はじめに紹介した「Markdown Named CodeBlocks」はvscodeの拡張機能ですが、やっていることとしてはmarkdown-it用に作られた拡張機能をvscodeでも使うように指定しているだけです。

上で使われている、markdown-it用の拡張機能：

この箇所にマッチングパターンが書いてありますね。

以下、抜粋して少し修正したものです：

const match = arr[0].match(/^([^:\n]+)?(:([^:\n]*))?([^:\n]*)?$/);
data.langName = match[1] || "";
data.fileName = match[3] || "";

以下のドキュメントによれば、vscodeのmarkdown 拡張機能を作るには、markdown-itの拡張機能を持ってくるだけでいいそうですね。

まあ、自分で何か作るとなったら、この記事で何度も紹介している「Markdown Named CodeBlocks」のソースを参考にするといいかもですね。

以上です。