Visual Studio Code の CSS を見やすくカスタマイズしてみました (2)

普段、Visual Studio Code を Markdown エディタとして利用していますが、見出し (特に、h2 と h3) がちょっと判別しにくいのが気になっていました。

以前の記事で、markdown.styles で CSS を読み込ませていたんですが、セキュリティ的な事情で思うような動作ができなくなってしまったので、後継を考えてみました。

Markdown Preview Enhanced

追加のカスタマイズも容易だし、すごく便利。便利なのですが、欠点がひとつだけ。

ネットワーク共有 (例：\\fireserver\folder\file.md) 上のファイルは、ネットワークドライブを割り当て (例：Z:\folder\file.md) てやらないと、上手く動作しない制約がありました。

本記事の公開時点では、まだ改修はされていない様子。ちょっと仕事では直接ネットワーク共有指定で書くことが多いので、出番は少なめ。上記の制約が関係ない人にとっては、かなり良い拡張機能かも。

Markdown Preview Github Styling

上記の制約を回避しつつ、妥協できるくらいの見た目。とりあえずのプレビューはコレで良さそうです。

しかし、この拡張機能だけでは、エクスポート (HTML) 時の出力ファイルには反映されません。

Markdown All in One (CSS 編集)

さて、前述の HTML 化には、Markdown All in One を利用しています。

この拡張機能は、カスタマイズした CSS の読み込みには対応していないようでしたので、使っている CSS を探してみました。

C:\Users\<UserName>\.vscode\extensions\yzhang.markdown-all-in-one-1.6.0\media\markdown.css がそれっぽいですね。

ということで、そのファイルを一部追記してみました。個人的好みですが、下記の通り。

h2 {
  padding-bottom: 0.3em;
  line-height: 1.2;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: whitesmoke;
}

h3 {
  text-decoration: underline;
}

pre, code {
  background-color: whitesmoke
}

h2 は長めの下線、h3 はテキストの下線、あとは引用のブロックに背景色をつけました。網羅的な確認はしてないので、へんなところに影響が出たらすみません ^^;