VSCodeでMarkdownのシンタックスハイライトを細かく調整する
VSCodeでMarkdownを編集していると、見出し部分や太字部分の色を変更したいことがあります。VSCodeの環境設定はちょっと込み入っているのと、情報がまとまっていなくて苦労したので、自分用にメモを残しておきます。
settings.json を開く
F1キー、あるいは Macなら Command + shift + p、Windows/Linuxでは Ctrl + shift + p を押してコマンドパレットを開き、“settings” と入力すると「ユーザー設定を開く」というコマンドが表示されますので、起動します。
このユーザー設定ファイルは JSON 形式で書かれていますので、適当な部分に設定を追加します。もっとも簡単な構造だと、テキストの太字部分はこのように設定しています。
{
"editor.tokenColorCustomizations": {
"textMateRules": [
// 太字
{
"scope": "markup.bold.markdown",
"settings": { "foreground": "#222222", "fontStyle": "bold" }
},
]
}
追加しているのは editor.tokenColorCustomizations という項目の textMateRules という設定であることがわかります。
このルールは [] で囲んだ部分に複数の {} で囲まれた設定を追加しますが、それぞれの括弧のなかには scope でどの箇所の色なのかを指定し、settings 設定を入力しています。設定には色や太字などがありますので、この設定も {} で囲って複数入力しています。
foreground が文字色で、fontStyleが bold だとか underline などで設定できる文字飾りの設定になっています。つまり、色を変えたい部分（スコープ）の数だけ {} を作るという作業を行います。それぞれの {} は , で区切らないといけないのだけ注意してください。
スコープを探す
スコープはとても細かく設定されているので、Markdownファイルの色を変えたい部分を一つ一つチェックして、スコープ名を調べて行きます。そのためにエディタートークンとスコープの検査を使います。先ほどと同様にコマンドパレットを起動して、scope と入力して呼び出します。
検査をしている状態で、Markdownファイルのそれぞれの部分にカーソルを移動すると、スコープ名がわかりますのでメモを取っていきます。
この画面だと heading.1.markdown entity.name.section.markdown みたいにスコープが見えていますので、これを使用します。
Hugo の記事で使用する色設定の例
ふだん Hugo の記事を執筆するときには Yaml 形式の Frontmatter つきの Markdown を書きますので、この部分の色と、リンクの下線が鬱陶しいので設定で無効にしたものを下の Gist にまとめておきました。
部分的に色が変ですが、このような雰囲気です。自由にダウンロードして改変して使ってください。
