VSCode – Markdown ドキュメントを PDF 化する方法 (markdown-pdf)

概要

本記事では、VSCode の拡張 markdown-pdf を使用して Markdown ドキュメントを PDF に変換する方法について説明します。

手順

1. markdown-pdf 拡張機能のインストール

VSCode の拡張機能として markdown-pdf をインストールします。

1. VSCode を開き、サイドバーの拡張機能アイコン（四つの四角形が組み合わさったアイコン）をクリックします。
2. 検索バーに「markdown-pdf」と入力し、検索結果から markdown-pdf 拡張機能を選択します。
3. 「インストール」ボタンをクリックして、拡張機能をインストールします。

2. Markdown ドキュメントの作成

PDF に変換したい Markdown ドキュメントを作成します。既に存在するドキュメントを使用する場合は、そのファイルを VSCode で開きます。

3. Markdown ドキュメントを PDF に変換

1. PDF に変換したい Markdown ファイルを VSCode で開きます。
2. 右クリックメニューから「markdown-pdf: Export (pdf)」を選択します。
3. 変換が開始され、変換が完了すると PDF ファイルが生成されます。

デザインを変更する

markdown-pdf では、Markdown を HTML に変換したのち、CSS を適用して PDF 化しています。 適用する CSS を変更することで、PDF 化した際のデザインを変更できます。

1. CSS ファイルを用意する

Markdown に適用する CSS を用意します。 デフォルトの CSS vscode-markdown-pdf/styles などを参考に作成します。 GitHub を探すと、jasonm23/markdown-css-themes のような Markdown 用の CSS が見つかるので、そちらを使うのもよいでしょう。

2. CSS ファイルを設定する

VSCode の設定より、以下の項目を変更します。

• markdown-pdf.styles に CSS ファイルのパスを絶対パスまたは相対パス指定します。
• markdown-pdf.outputDirectoryRelativePathFile を有効にすると、相対パスを指定した場合の基点が Markdown ファイルがあるディレクトリになります。

{
  "markdown-pdf.styles": ["C:\\Users\\username\\Desktop\\screen.css"]
}

ヘッダ、フッタをカスタマイズする

ヘッダー、フッターは以下のようになっています。

• ヘッダー: <タイトル> <日付>
• フッター: <ページ番号>/<合計のページ数>

これは設定の markdown-pdf.headerTemplate および markdown-pdf.footerTemplate でそれぞれ変更できます。 指定には、以下のプレースホルダーを指定できます。

• <span class='date'></span>: 日付 (ロケール適用)
• <span class='title'></span>: タイトル
• <span class='url'></span>: マークダウンのファイルパス
• <span class='pageNumber'></span>: 現在のページ番号
• <span class='totalPages'></span>: 合計のページ数
• %%ISO-DATETIME%%: 日付および時間 (YYYY-MM-DD hh:mm:ss)
• %%ISO-DATE%%: 日付 (YYYY-MM-DD)
• %%ISO-TIME%%: 時間 (hh:mm:ss)

デフォルトの設定:

{
  // pdf only. HTML template for the print header.
  "markdown-pdf.headerTemplate": "<div style=\"font-size: 9px; margin-left: 1cm;\"> <span class='title'></span></div> <div style=\"font-size: 9px; margin-left: auto; margin-right: 1cm; \">%%ISO-DATE%%</div>",

  // pdf only. HTML template for the print footer.
  "markdown-pdf.footerTemplate": "<div style=\"font-size: 9px; margin: 0 auto;\"> <span class='pageNumber'></span> / <span class='totalPages'></span></div>"
}

ヘッダーまたはフッターを削除したい場合 <div/> のように空タグを設定します。

{
  // pdf only. HTML template for the print header.
  "markdown-pdf.headerTemplate": "<div/>",

  // pdf only. HTML template for the print footer.
  "markdown-pdf.footerTemplate": "<div style=\"font-size: 9px; margin: 0 auto;\"> <span class='pageNumber'></span> / <span class='totalPages'></span></div>"
}

改ページ

PDF 化した際に図や画像などのコンテンツが途切れてしまう場合、改ページを入れて調整します。 マークダウンの改ページを入れた箇所にタグ <div class="page"/> を記入します。

![image](image.png)

<div class="page"/>