はじめに
Visual Studio Code のアップデートにより、本記事の情報が有効ではなくなってしまったようですので、あらためて色々調べて使ってみまして、Visual Studio Code の CSS を見やすくカスタマイズしてみました (2) にて公開しました。
以下、Obsolete ですが残しておきます。
普段、Visual Studio Code を Markdown エディタとして利用していますが、見出し (特に、h2 と h3) がちょっと判別しにくいのが気になっていました。
基本的には CSS をいじれば良い、ということで、自分好みにカスタマイズしてみました。
Markdown Preview
プレビュー画面の CSS は、ユーザー設定の markdown.styles で、読み込ませる CSS を指定ができます。
"markdown.styles": ["C:\\Users\\<ユーザー名>\\.vscode\\md_preview.css"]
のように指定しておいて、md_preview.css には下記のように記述しました。
h1 {
padding-bottom: 0.3em;
line-height: 1.2;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: whitesmoke;
}
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;
}
そうすると下記のようなプレビューになります。好みは分かれるかもしれませんが、個人的にはかなり見やすくなりました。
Markdown PDF
拡張機能である Markdown PDF もカスタマイズしてみました。
こちらは、下記のファイルで変更ができます。別にファイルを指定できるっぽいですが、生ファイルを変更しちゃいました。
C:\Users\<ユーザー名>\.vscode\extensions\yzane.markdown-pdf-0.1.7\styles\markdown.css
こちらも同様に、下記のように記述。
h1 {
padding-bottom: 0.3em;
line-height: 1.2;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: whitesmoke;
}
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;
}
スクリーンショットは割愛しますが、プレビューと同じような感じで大分見やすくなりました。