ITとかCockatielとか

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

VSCode の Markdown-PDF のPDFを見やすくする

やりたいこと

  • VSCodeのマークダウンは便利だが、PDF化するとh1,h2,h3...の見分けがつきずらいため、見づらい。
  • CSSを適用してPDF出力することで、hタグのレベルがすぐわかるようにしたい。
  • ただし、ここに記載している対応だけではプレビュー画面が従来のままとなるため、プレビュー画面へのCSS適用も同時に行った方がよい。この場合、CSSは共用したほうがいいかも。
    sik-bug.hatenablog.com

Reference

事前準備

セッティング

  • VSCodeのSettingsを開く。(File > Preferences > Setting、Windows ショートカット:Ctrl+ , )
  • 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;
}
h5 {
border-bottom: solid 3px black;
}
  • Markdown-pdf: Styles」でcssファイルを指定する。 f:id:sik_bug:20200813073902p:plain
     ↓
    f:id:sik_bug:20200813074240p:plain
  • PDFファイルを出力して、CSSが適用されていることを確認する。