FRONTEND2026-04-09📖 4分

MarkdownをPDFに変換する方法|VSCode拡張・Pandoc・CLIツールを比較

MarkdownをPDFに変換する方法|VSCode拡張・Pandoc・CLIツールを比較

MarkdownをPDFに変換する方法を、VSCode拡張機能(Markdown PDF)・Pandoc・md-to-pdfの3つで比較解説。インストールから設定、CSSカスタマイズ、CI/CD連携まで、実務で使えるワークフローをまとめました。

髙木 晃宏

代表 / エンジニア

👨‍💼

MarkdownでドキュメントをPDFに変換したい——そう考えたことのあるエンジニアは多いのではないでしょうか。

議事録、仕様書、手順書、ブログの下書き。Markdownで書いたテキストを、そのままPDFとして共有できれば、Wordを経由する手間がなくなります。本記事では、MarkdownをPDFに変換する代表的な3つの方法を比較しながら、実務で使えるレベルまで詳しく解説します。

MarkdownをPDFに変換する方法は大きく3つ

MarkdownからPDFへの変換方法は、主に以下の3つに分類できます。

方法ツール特徴おすすめ度
VSCode拡張機能Markdown PDF(yzane作)GUIで完結、導入が最も簡単★★★
汎用変換ツールPandoc多機能、LaTeX経由で高品質★★☆
CLIツールmd-to-pdfNode.js製、CSS指定可、CI/CD向き★★☆

目的に応じて使い分けるのがベストですが、まずは最も手軽なVSCode拡張機能から紹介します。

【おすすめ】VSCode拡張機能「Markdown PDF」で変換する

インストール

VSCodeの拡張機能マーケットプレイスで「Markdown PDF」と検索し、yzane氏が作成したものをインストールします。初回インストール時にChromium(約170〜280MB)のダウンロードが自動で行われるため、少し時間がかかります。

基本的な使い方

  1. VSCodeでMarkdownファイル(.md)を開く
  2. エディタ上で右クリック
  3. 「Markdown PDF: Export (pdf)」を選択

これだけでPDFが同じディレクトリに出力されます。コマンドパレット(Ctrl+Shift+P / Cmd+Shift+P)から「Markdown PDF: Export」と入力して実行する方法もあります。

PDF以外の出力形式

Markdown PDF拡張機能はPDF以外にも対応しています。

  • HTMLMarkdown PDF: Export (html)
  • PNGMarkdown PDF: Export (png)
  • JPEGMarkdown 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: convertOnSavetrueにすると、全ての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=2cm

Pandocの強み

  • 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 PDFPandocmd-to-pdf
導入の手軽さ★★★★☆☆★★☆
日本語対応◎ デフォルトで対応△ フォント指定が必要◎ CSS指定で対応
スタイル制御CSSLaTeXテンプレート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で配布——このワークフローを一度構築してしまえば、ドキュメント作成の効率は大幅に向上するはずです。