Markdown PDFの使い方完全ガイド！VSCodeで簡単PDF変換

プログラミング・IT

「このMarkdownファイル、PDFで共有したいんだけど…」 「クライアントに納品する資料、きれいなPDFにしたい」 「印刷用にMarkdownをPDF化したいけど、どうすれば？」

そんな悩み、VSCodeの「Markdown PDF」拡張機能で一発解決できるんです！

議事録、技術文書、マニュアル…Markdownで書いた文書をPDFに変換したい場面って意外と多いですよね。でも、専用のツールを探したり、オンラインサービスを使ったりするのは面倒。実は、VSCodeに「Markdown PDF」という素晴らしい拡張機能があって、ボタン一つでMarkdownをきれいなPDFに変換できちゃうんです。

この記事では、Markdown PDFの使い方を、初めての方でも5分で使えるように完全解説します。インストールから細かい設定まで、全部お見せしますね！

スポンサーリンク

Markdown PDFって何がすごいの？

Markdown PDFとは

Markdown PDFは、VSCode上でMarkdownファイルをPDF、HTML、PNG、JPEGに変換できる無料の拡張機能です。作者は日本の方（yzane さん）なので、日本語の扱いもバッチリ！

主な特徴：

  • ワンクリックでPDF変換
    右クリックメニューから簡単に変換
  • 日本語完全対応
    文字化けの心配なし
  • カスタマイズ自在
    フォント、余白、ヘッダー/フッターなど細かく設定可能
  • 複数形式に対応
    PDF以外にもHTML、画像形式で出力可能
  • 無料で使える
    商用利用もOK、制限なし

こんな場面で大活躍！

ビジネスシーン：

  • 議事録や報告書の配布
  • 技術仕様書の納品
  • プレゼン資料の印刷用データ

個人利用：

  • ブログ記事のバックアップ
  • 勉強ノートの印刷
  • レシピや手順書の保存

チーム開発：

  • READMEの配布用PDF作成
  • APIドキュメントの生成
  • コードレビュー資料の作成

【完全解説】Markdown PDFのインストールと初期設定

ステップ1：拡張機能をインストール

  1. VSCodeを開く
  2. 拡張機能タブを開く
    • ショートカット：Ctrl + Shift + X（Mac: Cmd + Shift + X）
    • または左サイドバーの四角いアイコンをクリック
  3. 検索ボックスに「Markdown PDF」と入力
  4. 「Markdown PDF」を見つける
    • 作者：yzane
    • アイコン：PDFの文字が目印
  5. 「インストール」ボタンをクリック

たった30秒でインストール完了です！

ステップ2：動作確認をしてみよう

  1. 適当なMarkdownファイルを開く
    • なければ「test.md」を新規作成
  2. 簡単なMarkdownを書く # テスト文書 これは**テスト**です。 - 項目1 - 項目2 - 項目3
  3. 右クリックして変換
    • エディター上で右クリック
    • 「Markdown PDF: Export (pdf)」を選択
  4. PDFが生成される
    • 同じフォルダに「test.pdf」が作成されます

成功！これであなたもMarkdown PDF使いの仲間入りです。

【実践】3つの変換方法をマスターしよう

方法1：右クリックメニューから変換（一番簡単！）

手順：

  1. Markdownファイルを開く
  2. エディター内で右クリック
  3. メニューから選択：
    • Markdown PDF: Export (pdf) → PDF変換
    • Markdown PDF: Export (html) → HTML変換
    • Markdown PDF: Export (png) → PNG画像変換
    • Markdown PDF: Export (jpeg) → JPEG画像変換

ポイント：

  • 一番よく使う方法
  • 迷ったらこれでOK
  • 出力先は元ファイルと同じフォルダ

方法2：コマンドパレットから変換（キーボード派向け）

手順：

  1. コマンドパレットを開く
    • Windows/Linux: Ctrl + Shift + P
    • Mac: Cmd + Shift + P
  2. 「markdown pdf」と入力
  3. 変換したい形式を選択：
    • Markdown PDF: Export (pdf)
    • Markdown PDF: Export (html)
    • Markdown PDF: Export (png)
    • Markdown PDF: Export (all types) ← 全形式一括出力！

便利な使い方： 全形式一括出力を使えば、PDF、HTML、画像を一度に生成できます。

方法3：ショートカットキーを設定して爆速変換

設定方法：

  1. キーボードショートカット設定を開く
    • ファイル → 基本設定 → キーボードショートカット
    • または Ctrl + K → Ctrl + S
  2. 「markdown pdf」で検索
  3. 好きなキーに割り当て
    • 例：Ctrl + Alt + P をPDF変換に設定
  4. これで一瞬で変換可能に！

私のおすすめは Ctrl + Alt + P です。覚えやすくて押しやすい！

カスタマイズして自分好みのPDFを作ろう

基本的なスタイル設定

設定の開き方：

  1. VSCodeの設定を開く（Ctrl + ,）
  2. 「markdown-pdf」で検索
  3. 各項目を調整

よく使う設定項目：

フォントサイズを変更

"markdown-pdf.styles": ["body { font-size: 14px; }"]

余白を調整

"markdown-pdf.margin.top": "2cm",
"markdown-pdf.margin.bottom": "2cm",
"markdown-pdf.margin.left": "2cm",
"markdown-pdf.margin.right": "2cm"

用紙サイズを変更

"markdown-pdf.format": "A4"  // A3, A4, A5, Legal, Letter, Tabloid

ヘッダーとフッターを追加

ドキュメントっぽくしたい時に便利！

ヘッダーの設定：

"markdown-pdf.displayHeaderFooter": true,
"markdown-pdf.headerTemplate": "<div style='font-size: 9px; width: 100%; text-align: center;'>技術文書</div>"

フッターの設定：

"markdown-pdf.footerTemplate": "<div style='font-size: 9px; width: 100%; text-align: center;'><span class='pageNumber'></span> / <span class='totalPages'></span></div>"

これでページ番号付きの本格的な文書になります！

CSSでデザインをカスタマイズ

オリジナルCSSファイルを作成：

  1. style.cssファイルを作成 /* 見出しのデザイン */ h1 { color: #2c3e50; border-bottom: 3px solid #3498db; padding-bottom: 10px; } /* コードブロックの背景 */ pre { background-color: #f4f4f4; padding: 10px; border-radius: 5px; } /* テーブルのデザイン */ table { border-collapse: collapse; width: 100%; } th { background-color: #3498db; color: white; padding: 10px; }
  2. settings.jsonに追加 "markdown-pdf.styles": ["./style.css"]

これで自分だけのおしゃれなPDFが作れます！

よくあるトラブルと解決方法

Q1. 日本語が文字化けする・表示されない

解決策：

  1. フォント設定を確認 "markdown-pdf.styles": ["body { font-family: 'メイリオ', 'Meiryo', sans-serif; }"]
  2. 文字コードをUTF-8に
    • ファイルの文字コードを確認（右下のステータスバー）
    • UTF-8でない場合は変更
  3. VSCodeを再起動
    • 設定変更後は再起動すると確実

Q2. 画像が表示されない

チェックポイント：

  1. 相対パスを正しく指定 ![画像](./images/sample.png) ← 正しいパスか確認
  2. 画像ファイルの存在確認
    • ファイル名の大文字小文字も要確認
  3. Base64エンコーディングを使用
    • 小さい画像なら埋め込みも検討
    ![画像](data:image/png;base64,iVBORw0KG...)

Q3. PDFのサイズが大きすぎる

対処法：

  1. 画像を圧縮
    • PNG → JPEG変換
    • 解像度を下げる
  2. 不要な空白ページを削除
    • Markdownの末尾の改行を削除
  3. 品質設定を調整 "markdown-pdf.quality": 75 // 0-100で調整

Q4. 数式（LaTeX）が表示されない

解決方法：

  1. KaTeXを有効化 "markdown-pdf.includeDefaultStyles": true
  2. 数式の記述方法を確認 インライン数式：$E = mc^2$ ブロック数式： $$ \sum_{i=1}^{n} x_i = x_1 + x_2 + ... + x_n $$
  3. 別の拡張機能を検討
    • Markdown Preview Enhancedとの併用も可能

実践！用途別PDF作成テクニック

技術仕様書を作る

ポイント：

  • コードブロックのシンタックスハイライトを活用
  • 目次を自動生成
  • バージョン情報をヘッダーに記載

設定例：

{
  "markdown-pdf.format": "A4",
  "markdown-pdf.margin.top": "2.5cm",
  "markdown-pdf.displayHeaderFooter": true,
  "markdown-pdf.headerTemplate": "<div style='font-size: 9px;'>技術仕様書 v1.0.0 | 2025年1月</div>"
}

プレゼン資料を作る

ポイント：

  • 横向きレイアウトを使用
  • フォントサイズを大きめに
  • 1ページ1トピック

設定例：

{
  "markdown-pdf.format": "A4",
  "markdown-pdf.orientation": "landscape",
  "markdown-pdf.styles": ["body { font-size: 18px; }"]
}

印刷用マニュアルを作る

ポイント：

  • 両面印刷を考慮した余白設定
  • ページ番号を必ず入れる
  • 章ごとに改ページ

Markdownでの改ページ：

内容その1

<div style="page-break-after: always;"></div>

内容その2（新しいページから始まる）

電子書籍風の読み物を作る

ポイント：

  • 読みやすいフォントサイズ（12-14px）
  • 適切な行間
  • 章タイトルを装飾

CSS設定例：

body {
  font-size: 13px;
  line-height: 1.8;
  font-family: "游明朝", "Yu Mincho", serif;
}

h1 {
  text-align: center;
  margin: 50px 0;
  font-size: 24px;
}

Markdown PDF vs 他の変換ツール

他の選択肢との比較

Pandoc（コマンドラインツール）

  • 利点：超高機能、多形式対応
  • 欠点：インストールが面倒、コマンド操作必須
  • こんな人向け：上級者、自動化したい人

オンライン変換サービス

  • 利点：インストール不要
  • 欠点：プライバシーの懸念、ネット必須
  • こんな人向け：たまにしか使わない人

Typora（Markdownエディタ）

  • 利点：WYSIWYG編集、美しいUI
  • 欠点：有料（約15ドル）
  • こんな人向け：Markdown専門で書く人

Markdown PDFの強み：

  • VSCode内で完結（追加ソフト不要）
  • 無料で制限なし
  • 日本語対応が完璧
  • カスタマイズが簡単

結論：VSCodeユーザーなら、Markdown PDF一択です！

便利な連携テクニック

GitHubとの連携

  1. README.mdをPDF化
    • プロジェクトの説明書として配布
  2. GitHub ActionsでCI/CD
    • pushしたら自動でPDF生成も可能

他の拡張機能との併用

Markdown All in One と併用：

  • 目次を自動生成してからPDF化
  • より構造的な文書が作成可能

PlantUML と併用：

  • UML図を含むドキュメントもPDF化
  • システム設計書に最適

バッチ処理で複数ファイルを一括変換

Node.jsスクリプト例：

// 複数のmdファイルを一括PDF変換
const files = ['doc1.md', 'doc2.md', 'doc3.md'];
// VSCodeのコマンドを呼び出して処理

まとめ：今日からあなたもPDF変換マスター！

Markdown PDFの使い方、思っていたより簡単だったのではないでしょうか？

この記事の重要ポイント：

  1. インストールは30秒
    • 拡張機能タブから「Markdown PDF」を検索してインストール
  2. 変換は右クリックから
    • 「Markdown PDF: Export (pdf)」を選ぶだけ
  3. カスタマイズで差をつける
    • CSS設定で自分好みのデザインに
    • ヘッダー/フッターでプロ仕様に
  4. トラブルは設定で解決
    • 日本語フォントの指定
    • 画像パスの確認

まずは、今開いているMarkdownファイルで右クリック → PDF変換を試してみてください。きっと「こんなに簡単なんだ！」と驚くはずです。

慣れてきたら、CSSカスタマイズやヘッダー設定にも挑戦してみましょう。オリジナルのかっこいいPDFが作れるようになれば、文書作成が楽しくなりますよ！

さあ、Markdown PDFで快適なドキュメントライフを始めましょう！📄✨

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました