ITとかCockatielとか

技術のこととか。飼鳥(オカメインコ)のこととか。気になったこととか。基本的には備忘録。

Visual Studio Code でのマークダウンプレビューでCSSを適用する

Note

  • CSSが適用されるのはプレビューだけ。
  • Markdown-Pdf でPDF化してもCSSは適用されない。

Reference

Markdown Preview Github Styling

  • VSCode拡張機能
  • CSSを記述することで、マークダウンプレビューの表示を変えることができる。
  • デフォルト表示の不満として、ヘッダレベル2以降は装飾が乏しく、ネストが判別しづらい点がある。これを解消できる。(このブログもマークダウンで記述しているが、ネストの判別のしやすさを最優先事項としてスタイルを選択している)

インストール方法

CSSの設定

  • CSSは以下のパスにある(Windows10の私の環境の場合)
    C:\Users\user_name\.vscode\extensions\bierner.markdown-preview-github-styles-0.1.6/base.css
  • 以下のようなコードを追加すればよい。(まだ試行中なので、適当な内容です。今後調整します。)
/*ここから追加CSS*/

h2 {
position: relative;
padding: 0.4em;
background: #568299;
color: #FFFFFF;
}

h3 {
background: linear-gradient(transparent 70%, #9ac6dd 70%);
}
h4 {
border-bottom: solid 3px #cce4ff;
position: relative;
}

h4:after {
position: absolute;
content: " ";
display: block;
border-bottom: solid 3px #5472cd;
bottom: -3px;
width: 20%;
}
h5 {
border-bottom: solid 3px black;
}