---
title: "VSCodeでMarkdownのシンタックスハイライトを細かく調整する"
generator: "Hugo Version: 0.164.0"
urlPrev: "https://mehori.com/blog/2024/liveshow-577/index.md"
urlNext: "https://mehori.com/blog/2024/liveshow-578/index.md"
---

VSCodeでMarkdownのシンタックスハイライトを細かく調整する


![](https://mehori.com/blog/2024/markdown-syntax-highlighting/markdown-syntax-highlighting.jpg)





VSCodeでMarkdownを編集していると、見出し部分や太字部分の色を変更したいことがあります。VSCodeの環境設定はちょっと込み入っているのと、情報がまとまっていなくて苦労したので、自分用にメモを残しておきます。

## settings.json を開く

F1キー、あるいは Macなら `Command + shift + p`、Windows/Linuxでは `Ctrl + shift + p` を押してコマンドパレットを開き、"settings" と入力すると「ユーザー設定を開く」というコマンドが表示されますので、起動します。

![](https://mehori.com/blog/2024/markdown-syntax-highlighting/vscode1.jpg)

このユーザー設定ファイルは JSON 形式で書かれていますので、適当な部分に設定を追加します。もっとも簡単な構造だと、テキストの太字部分はこのように設定しています。

```
{
	"editor.tokenColorCustomizations": {
		"textMateRules": [

            // 太字
		    {
                "scope": "markup.bold.markdown",
                "settings": { "foreground": "#222222", "fontStyle": "bold" }
            },
        ]
}
 ```

追加しているのは `editor.tokenColorCustomizations` という項目の `textMateRules` という設定であることがわかります。

このルールは `[]` で囲んだ部分に複数の `{}` で囲まれた設定を追加しますが、それぞれの括弧のなかには `scope` でどの箇所の色なのかを指定し、`settings` 設定を入力しています。設定には色や太字などがありますので、この設定も `{}` で囲って複数入力しています。

`foreground` が文字色で、`fontStyle`が `bold` だとか `underline` などで設定できる文字飾りの設定になっています。つまり、色を変えたい部分（スコープ）の数だけ `{}` を作るという作業を行います。それぞれの `{}` は `,` で区切らないといけないのだけ注意してください。


## スコープを探す

スコープはとても細かく設定されているので、Markdownファイルの色を変えたい部分を一つ一つチェックして、スコープ名を調べて行きます。そのためにエディタートークンとスコープの検査を使います。先ほどと同様にコマンドパレットを起動して、`scope` と入力して呼び出します。

![](https://mehori.com/blog/2024/markdown-syntax-highlighting/vscode2.jpg)

検査をしている状態で、Markdownファイルのそれぞれの部分にカーソルを移動すると、スコープ名がわかりますのでメモを取っていきます。

![](https://mehori.com/blog/2024/markdown-syntax-highlighting/vscode3.jpg)

この画面だと `heading.1.markdown entity.name.section.markdown` みたいにスコープが見えていますので、これを使用します。

## Hugo の記事で使用する色設定の例

ふだん Hugo の記事を執筆するときには Yaml 形式の Frontmatter つきの Markdown を書きますので、この部分の色と、リンクの下線が鬱陶しいので設定で無効にしたものを下の Gist にまとめておきました。

![](https://mehori.com/blog/2024/markdown-syntax-highlighting/vscode4.jpg)

部分的に色が変ですが、このような雰囲気です。[自由にダウンロードして](https://mehori.com/blog/2024/markdown-syntax-highlighting/https://gist.github.com/mehori/4ebcd29640a1231d80f4421303494cf6#file-settings-jsonc)改変して使ってください。


## 参考リンク

- [Visual Studio Codeの設定「虎の巻」：構文ハイライト／配色テーマ自作編 | @IT](https://mehori.com/blog/2024/markdown-syntax-highlighting/https://atmarkit.itmedia.co.jp/ait/articles/1710/20/news023.html)
- [コマンドパレットを駆使してVS Codeを使いこなそう！ | @IT](https://mehori.com/blog/2024/markdown-syntax-highlighting/https://atmarkit.itmedia.co.jp/ait/articles/2105/28/news032.html)