Markdownをブラウザの印刷機能できれいにPDFにする

MarkdownをPDFにするのに、専用のツールは要りません。
プレビューを表示できるなら、ブラウザの印刷機能でPDFとして保存できます。

手順は次のとおりです。

1. プレビューを表示する
2. Ctrl + P（Macは Cmd + P）を押す
3. 送信先で「PDFに保存」を選ぶ
4. 保存

ここまでは簡単なのですが、そのまま出すと想定と違う見た目になることがあります。
つまずきやすいのは3か所です。

画面のUIが一緒に出てしまう

何もしていないと、ツールバーやサイドバーまでPDFに入ります。

印刷用のスタイルを用意しているツールであれば、印刷時にUIが自動で消えます。
LiteMDでは、エディタ側のパネルやボタンを印刷対象から外し、プレビューの内容だけが出るようにしています。背景も白、文字も黒に切り替えています。

印刷用のスタイルが無いツールの場合は、プレビューだけを別ウィンドウで開いてから印刷する、といった回避が要ります。

余白とヘッダー・フッター

印刷ダイアログの「詳細設定」に、余白とヘッダー/フッターの項目があります。

初期状態では、ページの上下にURLと日付とページ番号が入ります。
文書として渡すものであれば、「ヘッダーとフッター」のチェックを外したほうが体裁が整います。

余白は「デフォルト」で問題ないことが多いですが、表やコードブロックが右にはみ出す場合は「なし」にすると収まることがあります。

コードブロックが切れる

横に長いコードは、画面上では横スクロールで見られますが、紙には収まりません。
スクロールできない以上、はみ出した部分は消えます。

確実なのは、PDFにする前にソース側で折り返しておくことです。
80文字前後で改行を入れておけば、大きく崩れることはありません。

同じ理由で、列の多い表も切れやすくなります。
用紙の向きを横にすると入る場合があるので、表が主役の文書であれば試す価値があります。

出来上がるのは画像ではない

ブラウザの印刷から作ったPDFは、文字が文字のまま入ります。
受け取った側で検索できますし、コピーもできます。

画面を撮ってPDFにする方法だと、見た目は近くても中身は画像なので、検索もコピーもできません。
渡す相手が中身を引用する可能性があるなら、印刷機能から作っておくほうが親切です。

改ページの位置は選べない

ブラウザの印刷は、内容を上から流し込んで用紙の高さで区切るだけです。
見出しの直後でページが変わる、といったことも起きます。

位置を厳密に指定したい場合、この方法では対応できません。
ただ、社内で回す資料や自分用の控えであれば、そこまで求められない場面のほうが多いと思います。

見出しの前に空行を足して位置をずらす、という力技で足りることもあります。