MarkdownでドキュメントをPDFに変換したい——そう考えたことのあるエンジニアは多いのではないでしょうか。
議事録、仕様書、手順書、ブログの下書き。Markdownで書いたテキストを、そのままPDFとして共有できれば、Wordを経由する手間がなくなります。本記事では、MarkdownをPDFに変換する代表的な3つの方法を比較しながら、実務で使えるレベルまで詳しく解説します。
MarkdownをPDFに変換する方法は大きく3つ
MarkdownからPDFへの変換方法は、主に以下の3つに分類できます。
| 方法 | ツール | 特徴 | おすすめ度 |
|---|---|---|---|
| VSCode拡張機能 | Markdown PDF(yzane作) | GUIで完結、導入が最も簡単 | ★★★ |
| 汎用変換ツール | Pandoc | 多機能、LaTeX経由で高品質 | ★★☆ |
| CLIツール | md-to-pdf | Node.js製、CSS指定可、CI/CD向き | ★★☆ |
目的に応じて使い分けるのがベストですが、まずは最も手軽なVSCode拡張機能から紹介します。
【おすすめ】VSCode拡張機能「Markdown PDF」で変換する
インストール
VSCodeの拡張機能マーケットプレイスで「Markdown PDF」と検索し、yzane氏が作成したものをインストールします。初回インストール時にChromium(約170〜280MB)のダウンロードが自動で行われるため、少し時間がかかります。
基本的な使い方
- VSCodeでMarkdownファイル(.md)を開く
- エディタ上で右クリック
- 「Markdown PDF: Export (pdf)」を選択
これだけでPDFが同じディレクトリに出力されます。コマンドパレット(Ctrl+Shift+P / Cmd+Shift+P)から「Markdown PDF: Export」と入力して実行する方法もあります。
PDF以外の出力形式
Markdown PDF拡張機能はPDF以外にも対応しています。
- HTML —
Markdown PDF: Export (html) - PNG —
Markdown PDF: Export (png) - JPEG —
Markdown PDF: Export (jpeg) - 全形式一括 —
Markdown PDF: Export (all)
settings.jsonでの主要な設定
{
// 保存時に自動でPDFを生成
"markdown-pdf.convertOnSave": false,
// 出力形式の指定
"markdown-pdf.type": ["pdf"],
// 余白の設定
"markdown-pdf.margin.top": "1.5cm",
"markdown-pdf.margin.bottom": "1cm",
"markdown-pdf.margin.left": "1.3cm",
"markdown-pdf.margin.right": "1.3cm",
// ヘッダー・フッターの表示
"markdown-pdf.displayHeaderFooter": true,
"markdown-pdf.headerTemplate": "<div style='font-size: 9px; margin-left: 1cm;'>ドキュメントタイトル</div>",
"markdown-pdf.footerTemplate": "<div style='font-size: 9px; margin: 0 auto;'><span class='pageNumber'></span> / <span class='totalPages'></span></div>",
// カスタムCSSの適用
"markdown-pdf.styles": ["style.css"],
"markdown-pdf.stylesRelativePathFile": true,
// 改行の有効化
"markdown-pdf.breaks": true,
// 出力先ディレクトリの指定
"markdown-pdf.outputDirectory": "output",
"markdown-pdf.outputDirectoryRelativePathFile": true
}💡 Tips:
convertOnSaveをtrueにすると、全てのMarkdownファイルが保存のたびにPDF化されます。特定のファイルだけを対象にしたい場合は、ワークスペース設定(.vscode/settings.json)で制御するのが現実的です。
CSSでPDFの見た目をカスタマイズする
Markdown PDF拡張機能は、CSSファイルを指定することでPDFのスタイルを自由にカスタマイズできます。
/* markdown-pdf-style.css */
body {
font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 11pt;
line-height: 1.8;
color: #333;
}
h1 {
font-size: 22pt;
border-bottom: 2px solid #2c3e50;
padding-bottom: 8px;
margin-top: 32px;
}
h2 {
font-size: 16pt;
color: #2c3e50;
margin-top: 24px;
}
code {
background-color: #f5f5f5;
padding: 2px 6px;
border-radius: 3px;
font-size: 10pt;
}
pre code {
display: block;
padding: 12px;
overflow-x: auto;
}
table {
border-collapse: collapse;
width: 100%;
margin: 16px 0;
}
th, td {
border: 1px solid #ddd;
padding: 8px 12px;
text-align: left;
}
th {
background-color: #f0f0f0;
font-weight: bold;
}
/* 改ページの制御 */
h1, h2 {
page-break-after: avoid;
}
table, pre {
page-break-inside: avoid;
}改ページの挿入
PDFで改ページを入れたい箇所に、以下のHTMLタグを記述します。
<div style="page-break-after: always;"></div>Mermaid図の表示
Markdown PDF拡張機能はMermaidに対応していますが、デフォルトでは正しく表示されない場合があります。settings.jsonに以下を追加してください。
{
"markdown-pdf.mermaidServer": "https://unpkg.com/mermaid/dist/mermaid.min.js"
}PandocでMarkdownをPDFに変換する
Pandocは「万能ドキュメント変換ツール」とも呼ばれるオープンソースソフトウェアです。Markdownに限らず、多数のフォーマット間の変換に対応しています。
インストール
# macOS
brew install pandoc
# Ubuntu / Debian
sudo apt install pandoc
# Windows(Chocolatey)
choco install pandoc日本語PDFを生成する場合は、LaTeXエンジンも必要です。
# macOS
brew install --cask mactex-no-gui
# Ubuntu
sudo apt install texlive-xetex texlive-lang-japanese基本的な変換コマンド
pandoc input.md -o output.pdf日本語を含むMarkdownをPDFに変換する場合は、フォントとエンジンの指定が必要です。
pandoc input.md -o output.pdf \
--pdf-engine=xelatex \
-V mainfont="Noto Sans CJK JP" \
-V geometry:margin=2cmPandocの強み
- LaTeX経由のため、数式を含むドキュメントに強い
- テンプレート機能で一貫したフォーマットを適用可能
- 目次の自動生成(
--tocオプション) - 参考文献の管理(BibTeX連携)
Pandocの注意点
- LaTeXのインストールが必要(数GB)
- 初回のセットアップに手間がかかる
- CSS指定ではなくLaTeXテンプレートによるスタイル制御
CLIツール(md-to-pdf)でMarkdownからPDF生成する
md-to-pdfは、Node.js製のCLIツールで、ヘッドレスChrome(Puppeteer)を使ってMarkdownをPDFに変換します。
インストール
npm install -g md-to-pdf基本的な使い方
md-to-pdf input.md同じディレクトリにinput.pdfが生成されます。
CSSの指定
ファイルの先頭にYAML frontmatterでCSSを指定できます。
---
stylesheet: style.css
pdf_options:
format: A4
margin: 20mm
---
# ドキュメントタイトル
本文が始まります...CI/CDでの活用
md-to-pdfはCLIツールのため、GitHub ActionsなどのCI/CDパイプラインに組み込みやすいのが特徴です。
# .github/workflows/generate-pdf.yml
- name: Generate PDF
run: |
npm install -g md-to-pdf
md-to-pdf docs/manual.md --dest output/ドキュメントの更新を検知して自動でPDFを生成・デプロイする仕組みが構築できます。
3つの方法の比較まとめ
| 項目 | VSCode Markdown PDF | Pandoc | md-to-pdf |
|---|---|---|---|
| 導入の手軽さ | ★★★ | ★☆☆ | ★★☆ |
| 日本語対応 | ◎ デフォルトで対応 | △ フォント指定が必要 | ◎ CSS指定で対応 |
| スタイル制御 | CSS | LaTeXテンプレート | CSS |
| 数式対応 | △ | ◎ | △ |
| CI/CD連携 | × | ○ | ◎ |
| Mermaid対応 | ○(設定必要) | △(フィルター必要) | ○ |
| 複数ファイル一括変換 | △ | ◎ | ○ |
おすすめの使い分け:
- 日常的なドキュメント作成 → VSCode Markdown PDF
- 学術論文・数式を含む文書 → Pandoc
- CI/CDでの自動生成・チーム運用 → md-to-pdf
実務でMarkdown PDF変換を活用するシーン
MarkdownからPDFへの変換は、以下のような実務シーンで特に活躍します。
技術仕様書・設計書: Markdownで記述→Git管理→PDF出力して社内共有。変更履歴がGitに残るため、Wordファイルの「v2_final_最終版(2).docx」問題から解放されます。
作業手順書: markdown-it-includeを使えば、手順書を章ごとに分割執筆し、1つのPDFにまとめることが可能です。チームでの並行作業に適しています。
クライアント向け提案書: CSSでブランドカラーやロゴを適用すれば、見た目の整った提案書をMarkdownだけで作成できます。
議事録: 会議中にMarkdownでメモ→終了後にPDF化して配布。テキストベースなので検索性も高い。
よくあるトラブルと解決策
Markdown PDFで日本語が文字化けする
Chromiumに日本語フォントがインストールされていない場合に起こります。CSSで明示的にフォントを指定するか、システムにNoto Sans CJK JPをインストールしてください。
body {
font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
}PDFのファイルサイズが大きすぎる
画像を多く含む場合に発生します。事前に画像を圧縮するか、PNGではなくJPEGを使用することでファイルサイズを抑えられます。
Markdown PDFでMermaidが表示されない
settings.jsonのmermaidServer設定を確認してください。デフォルトのCDN URLが古い場合、最新のMermaid CDN URLに更新する必要があります。
Pandocで日本語PDFが生成できない
LaTeXエンジン(xelatex)と日本語フォントの両方が必要です。--pdf-engine=xelatexオプションと-V mainfontでフォント指定を行ってください。
まとめ
MarkdownをPDFに変換する方法は、用途に応じて選択肢があります。
- 手軽さ重視 → VSCode拡張機能「Markdown PDF」で右クリック一発
- 品質重視 → PandocでLaTeX経由の高品質PDF
- 自動化重視 → md-to-pdfでCI/CD連携
いずれの方法でも、CSSやテンプレートでスタイルを整えれば、Wordに遜色ないドキュメントを作成できます。Markdownで書いてPDFで配布——このワークフローを一度構築してしまえば、ドキュメント作成の効率は大幅に向上するはずです。
