iphone5でもヌルヌルコンテンツ全体をスライドできるような仕組みを考える。

普段、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<ユーザー名>.vscodeextensionsyzane.markdown-pdf-0.1.7stylesmarkdown.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;
}

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

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

Visual Studio Code のMarkdownプレビューをCSSでカスタマイズする方法とプレビュー用CSSのサンプルです。

関連記事