【Visual Studio Code】Markdown PDF の表示を CSS で変更する方法

はじめに

Markdown PDF のプレビュー表示を変更する方法をノートいたします。

まとめ

• VS Code の Markdown PDF の設定で PDF の CSS を指定すれば良い。
• 出力した PDF が変化するのであって、VS Code 上のプレビューの表示は変化しない点に注意。
• 左が PDF スタイル変更前、右が変更後の比較画像をページトップに掲載。

VS Code 設定

Code > 基本設定 > 設定 [command ,] で設定を開き、ユーザ設定にて、Markdown PDF 表示で読み込む CSS を次のように指定します。

{
… 略 …
"markdown-pdf.styles": ["/Users/oki2a24/Library/Application Support/Code/User/markdown.css"]
}

Markdown PDF 用の CSS

... 略 ...
body {
	font-family: "Segoe WPC", "Segoe UI", "SFUIText-Light", "HelveticaNeue-Light", sans-serif, "Droid Sans Fallback";
	font-size: 9px;
	padding: 0 7px;
	line-height: 11px;
	word-wrap: break-word;
}
... 略 ...
h2 {
	padding-bottom: 0.3em;
	line-height: 0.9;
	border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #DDD
}
... 略 ...

変更した行をハイライトしています。そして、追加した行を掲載します。h2 を追加しましたけれども、追加した場所は、h1, h2, h3 { の直前です。

参考

• How to change font size of generated pdf · Issue #40 · yzane/vscode-markdown-pdf
  • PDF の CSS は yzane/vscode-markdown-pdf の style ディレクトリ下にあるのでこれを上書きすればよいとありますね♪

おわりに

以前に今回の方法で修正し、その結果を PDF にして提出したことがありました。デフォルトでは、大きく表示されすぎて、ページ数が多くなってしまったのです。あわてて修正しました。

次回忘れていそうですので、簡単にできるように、ノートいたしました。

以上です。