LoginSignup
20
28

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-01-05

はじめに

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

そうすると下記のようなプレビューになります。好みは分かれるかもしれませんが、個人的にはかなり見やすくなりました。

test.png

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

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

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

20
28
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
20
28