VS Code と Markdown で資料作成

VS Code 関係の記事ばっかり書いている気がする。

皆さん Markdown 書いてますか？

GitHub の README とか Qiita とか、この記事を読むようなコンピュータ関係の技術者だと比較的使っている人も多いと思います。それなりに単純な記法でありながら、簡単な文書程度であれば作成できる十分な表現力も持ち合わせていて、Markdown に対応したサービスであれば体裁を整えて出力もしてくれます。

僕ははてなブログに記事を投稿するときはいつも Markdown で書いてますし、そうでなくても大抵の文書はまず Markdown で書いています。 (最近は個人的なメモはScrapboxに書くので若干機会は減りましたが。)

VS Code には現在デフォルトで Markdown をサポートしていて、シンタックスハイライトやプレビューなどの機能を使うことができます。これだけでも十分便利なのですが、ちょっと変更を加えるだけで更に便利になったので記事にします。

Markdown PDF の導入と設定

まず、Markdown PDFという拡張機能を導入します。これを導入することで、作成した Markdown の文書を PDF に変換して保存することができるようになります。

設定は以下のようにしました。

{
// 保存時に自動で変換
"markdown-pdf.convertOnSave": true,

// pdf出力時の余白設定
"markdown-pdf.margin.bottom": "2.5cm",
"markdown-pdf.margin.top":    "2.5cm",
"markdown-pdf.margin.left":   "2.5cm",
"markdown-pdf.margin.right":  "2.5cm",

// PDF変換に用いる 後述
"markdown-pdf.executablePath": "/opt/google/chrome/chrome",

// ヘッダとフッタの設定
"markdown-pdf.headerTemplate": "<div />",
"markdown-pdf.footerTemplate": "<div style=\"font-size: 9px; margin: 0.5cm auto; \"> <span class='pageNumber'></span> / <span class='totalPages'></span></div>",

// ユーザーCSS 後述
"markdown-pdf.styles": ["~/.css/simple-doc.css"],
}

概ねコメントと設定名そのままなので特に書くこともないですが、少し注釈。 markdown-pdf.executablePathですが、通常は拡張機能側で勝手に導入してくれるはずなので、何も指定しなくても大丈夫なはずです。ただ、手元の Arch Linux 環境ではうまく動作しなかったので、自分で設定しています。

ユーザーCSS

デフォルトでも結構いい感じに体裁を整えてくれるのですが、見出し周りが少し納得いかなかったのと、段落の始めに空白を確保してほしかったので少し変更を加えました。 CSSを書くことで変更できて、これは上記設定のmarkdown-pdf-stylesの部分に当たります。今回は、下記CSSを~/.css/simple-doc.cssに配置しました。

margin-bottomをコメントアウトしているのは、1行目に日付と著者を入れるときにはマージンが無いほうが綺麗に見えて、いきなり本文のときはマージンを入れたほうが綺麗に見えるという理由で結構適当です。

サンプル

この記事自体も Markdown なので、(日付と著者いれて)変換してやると大体こんな感じの出力が得られます。日付と著者は<div style="text-align: right;">2018/08/31 yk_marble 著</div>でいれていて、これはもう少し頑張って賢くやってほしい。ただ、いままでこういうそのまま印刷可能な文章書こうとすると結局 LaTeX 書くことになったりしてたので、個人的には大進歩。

f:id:dj_marble:20180831195551p:plain

まメモ

みむ

VS Code と Markdown で資料作成

Markdown PDF の導入と設定

ユーザーCSS

サンプル