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

はじめに

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 には下記のように記述しました。

.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

こちらも同様に、下記のように記述。

.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;
}

スクリーンショットは割愛しますが、プレビューと同じような感じで大分見やすくなりました。

参考にさせていただいたサイト