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 にまとめておきました。
部分的に色が変ですが、このような雰囲気です。自由にダウンロードして改変して使ってください。
| { | |
| "editor.tokenColorCustomizations": { | |
| "textMateRules": [ | |
| // 太字 | |
| { "scope": "markup.bold.markdown", "settings": { "foreground": "#222222", "fontStyle": "bold" } }, | |
| { "scope": "punctuation.definition.bold.markdown", "settings": { "foreground": "#222222", "fontStyle": "bold" } }, | |
| // 見出し部分 | |
| // ”# 見出し" の # 部分の色 | |
| { "scope": "punctuation.definition.heading.markdown", "settings": { "foreground": "#4599C4", "fontStyle": "bold" } }, | |
| // "# 見出し" の 見出し 部分の色 | |
| { "scope": "entity.name.section.markdown", "settings": { "foreground": "#4599C4", "fontStyle": "bold" } }, | |
| // h1,h2,h3 それぞれの色 | |
| { "scope": "heading.1.markdown entity.name.section.markdown", "settings": { "foreground": "#4599C4", "fontStyle": "bold" } }, | |
| { "scope": "heading.2.markdown entity.name.section.markdown", "settings": { "foreground": "#4599C4", "fontStyle": "bold" } }, | |
| { "scope": "heading.3.markdown entity.name.section.markdown", "settings": { "foreground": "#4599C4", "fontStyle": "bold" } }, | |
| // 箇条書きのバレット部分 | |
| { "scope": "punctuation.definition.list.begin.markdown", "settings": { "foreground": "#4f4f4f" } }, | |
| // リンク [テキスト](URL) の URL 部分、テキスト部分、[]()の記号部分の色 | |
| { "scope": "markup.underline.link.markdown", "settings": { "foreground": "#4f4f4f", "fontStyle": "" } }, | |
| { "scope": "string.other.link.title.markdown", "settings": { "foreground": "#4f4f4f" } }, | |
| { "scope": "punctuation.definition.metadata.markdown", "settings": { "foreground": "#4599C4" } }, | |
| // 画像関係 | |
| //  の "(" と ")" と "[" と "]" の色 | |
| { "scope": "punctuation.definition.link.title.begin.markdown", "settings": { "foreground": "#4599C4" } }, | |
| { "scope": "punctuation.definition.link.title.end.markdown", "settings": { "foreground": "#4599C4" } }, | |
| { "scope": "punctuation.definition.link.description.begin.markdown", "settings": { "foreground": "#4599C4" } }, | |
| { "scope": "punctuation.definition.link.description.end.markdown", "settings": { "foreground": "#4599C4" } }, | |
| //  の "URL" の色 | |
| { "scope": "markup.underline.link.image.markdown", "settings": { "foreground": "#4f4f4f" } }, | |
| //  の "画像" の色 | |
| { "scope": "string.other.link.description.markdown", "settings": { "foreground": "#4f4f4f" } }, | |
| // 引用部分の色 | |
| { "scope": "markup.quote.markdown", "settings": { "foreground": "#4599C4", } }, | |
| // テーブル関係 | |
| { "scope": "punctuation.definition.table.markdown", "settings": { "foreground": "#666666" } }, | |
| { "scope": "markup.table.markdown", "settings": { "foreground": "#4f4f4f" } }, | |
| { "scope": "punctuation.separator.table.markdown", "settings": { "foreground": "#666666" } }, | |
| { "scope": "meta.separator.markdown", "settings": { "foreground": "#666666" } }, | |
| // yaml frontmatter の色 | |
| { "scope": "entity.name.tag.yaml", "settings": { "foreground": "#4599C4" }} , | |
| { "scope": "string.unquoted.plain.out.yaml", "settings": { "foreground": "#4f4f4f" }} , | |
| { "scope": "string.quoted.double.yaml", "settings": { "foreground": "#4f4f4f" }} , | |
| { "scope": "string.quoted.double.yaml", "settings": { "foreground": "#4f4f4f" }} , | |
| { "scope": "punctuation.definition.string", "settings": { "foreground": "#4f4f4f" }} , | |
| // hugo 関係の色 | |
| { "scope": "string.quoted.double.hugo", "settings": { "foreground": "#4f4f4f" } } | |
| ] | |
| }, | |
| // リンクのURLの下線を消す | |
| "[markdown]": {"editor.links": false} | |
| } |
