VS CodeでMarkdownをPDFに変換する方法｜プレビューからそのまま出力する便利な拡張機能も紹介

「VS CodeでMarkdownを書いてるけど、きれいなPDFにして提出したい」
「技術文書や議事録をPDF形式で共有したい」
「プレビューで確認しながらそのままPDFにできたら便利なのに」
「数式やフローチャートも含めてPDFにしたい」

Markdownで文書を作成していて、こんなふうに思ったことはありませんか？

実は、VS Codeには優秀な拡張機能があり、MarkdownをワンクリックでPDFに変換できます。プレビューを確認しながら、そのままの見た目でPDFを生成できる便利な機能です。

この記事では、VS CodeでMarkdownからPDFを簡単に作る方法と、用途に応じたおすすめの拡張機能を詳しく紹介します。

なぜVS CodeでMarkdown→PDF変換が便利なのか？
1. 従来の方法との比較
2. VS Code拡張機能のメリット
おすすめ拡張機能の詳細比較
1. 主要な拡張機能一覧
Markdown PDF – シンプルで確実な変換
Markdown Preview Enhanced – 高機能なプレビューと変換
データベース設計
CSSによるデザインカスタマイズ
1. Markdown PDFのスタイルカスタマイズ
2. Markdown Preview Enhancedのテーマカスタマイズ
用途別の最適化設定
今後の展望
1. 目標
2. CI/CDでの自動PDF生成
トラブルシューティング
1. よくある問題と解決法
2. デバッグ方法
まとめ：VS CodeでMarkdown→PDF変換をマスターしよう
1. 今回学んだ重要ポイント
2. 用途別おすすめ拡張機能

なぜVS CodeでMarkdown→PDF変換が便利なのか？

従来の方法との比較

方法	メリット	デメリット
オンライン変換	簡単	セキュリティリスク、ネット必須
Pandoc	高機能	コマンドライン、設定が複雑
Typora等専用エディタ	WYSIWYG	別アプリ、有料の場合も
VS Code拡張	統合環境、カスタマイズ自由	初期設定が必要

VS Code拡張機能のメリット

ワークフロー効率化：

編集→プレビュー→PDF変換が同一環境で完結
ファイル管理も同じエディタ内
バージョン管理との連携

カスタマイズ性：

CSSでデザイン自由自在
複数の出力形式（PDF、HTML、PNG）
チーム共通設定の共有

拡張機能名	開発者	主な特徴	おすすめ用途
Markdown PDF	yzane	シンプル、軽量	基本的な文書変換
Markdown Preview Enhanced	shd101wyy	高機能、数式・図表対応	技術文書、学術文書
Markdown All in One	Yu Zhang	多機能統合	編集と変換の両方
Markdown Converter	David Anson	軽量変換特化	シンプルな変換のみ

Markdown PDF – シンプルで確実な変換

基本情報と特徴

開発者： yzane
ダウンロード数： 100万+

主な機能：

ワンクリックPDF変換
HTML、PNG、JPEG出力対応
CSSカスタマイズ対応
バッチ変換機能

インストールと基本設定

インストール手順

VS Codeの拡張機能パネル（Ctrl+Shift+X）を開く
検索欄に「Markdown PDF」と入力
yzane.markdown-pdfを選択してインストール

基本的な使用方法

# VS Code内での操作手順
1. PDFにしたいMarkdownファイルを開く
2. Ctrl+Shift+P (Windows/Linux) または Cmd+Shift+P (Mac)
3. "Markdown PDF: Export (pdf)" を選択
4. 同じフォルダに .pdf ファイルが生成される

基本設定の最適化

// settings.json
{
  // Markdown PDF の基本設定
  "markdown-pdf.type": "pdf",
  "markdown-pdf.quality": 100,
  "markdown-pdf.clip.x": 0,
  "markdown-pdf.clip.y": 0,
  "markdown-pdf.clip.width": 0,
  "markdown-pdf.clip.height": 0,
  
  // ページ設定
  "markdown-pdf.format": "A4",
  "markdown-pdf.orientation": "portrait",
  "markdown-pdf.border.top": "1.5cm",
  "markdown-pdf.border.bottom": "1cm",
  "markdown-pdf.border.right": "1cm",
  "markdown-pdf.border.left": "1cm",
  
  // ヘッダー・フッター
  "markdown-pdf.displayHeaderFooter": true,
  "markdown-pdf.headerTemplate": "<div style='font-size:9px; margin-left:1cm;'> <span class='title'></span></div>",
  "markdown-pdf.footerTemplate": "<div style='font-size:9px; margin:0 auto;'> <span class='pageNumber'></span> / <span class='totalPages'></span></div>"
}

実践的な使用例

基本的なMarkdownファイルの例

# プロジェクト仕様書

## 概要

このドキュメントは、新しいWebアプリケーションの仕様書です。

## 主な機能

### ユーザー管理
- ユーザー登録・ログイン機能
- プロフィール編集機能
- パスワードリセット機能

### データ管理
- データの作成・読み取り・更新・削除（CRUD操作）
- データの検索・フィルタリング機能

## 技術スタック

| 分野 | 技術 |
|------|------|
| フロントエンド | React.js |
| バックエンド | Node.js + Express |
| データベース | PostgreSQL |

## スケジュール

1. **設計フェーズ** (2週間)
   - 要件定義
   - アーキテクチャ設計

2. **開発フェーズ** (6週間)
   - フロントエンド開発
   - バックエンド開発

3. **テストフェーズ** (2週間)
   - 単体テスト
   - 統合テスト

PDF出力結果の特徴

レイアウト: A4サイズで美しいフォーマット
スタイル: デフォルトのMarkdownスタイルを保持
表: テーブルが正しく変換される
画像: 埋め込み画像も適切に表示

Markdown Preview Enhanced – 高機能なプレビューと変換

基本情報と特徴

開発者： shd101wyy
ダウンロード数： 500万+

主な機能：

リアルタイムプレビュー
数式レンダリング（KaTeX/MathJax）
図表作成（Mermaid、PlantUML）
カスタムテーマ対応
多種類の出力形式

インストールと設定

インストール手順

# VS Code拡張機能パネルで検索・インストール
"Markdown Preview Enhanced"
# または
# 拡張機能ID: shd101wyy.markdown-preview-enhanced

基本設定

// settings.json - MPE設定
{
  // プレビュー設定
  "markdown-preview-enhanced.enableTypographer": true,
  "markdown-preview-enhanced.enableLinkify": true,
  "markdown-preview-enhanced.enableEmojiSyntax": true,
  
  // 数式設定
  "markdown-preview-enhanced.mathRenderingOption": "KaTeX",
  "markdown-preview-enhanced.mathInlineDelimiters": [["$", "$"]],
  "markdown-preview-enhanced.mathBlockDelimiters": [["$$", "$$"]],
  
  // 図表設定
  "markdown-preview-enhanced.enableMermaidTheme": true,
  "markdown-preview-enhanced.mermaidTheme": "default",
  
  // PDF出力設定
  "markdown-preview-enhanced.puppeteerWaitForTimeout": 3000,
  "markdown-preview-enhanced.printBackground": true
}

高度な機能の活用

数式の記述と出力

# 数学的解析レポート

## 基本的な数式

インライン数式: 二次方程式の解は $x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}$ です。

ブロック数式:
$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$

## 行列の表現

$$
A = \begin{pmatrix}
a_{11} & a_{12} & \cdots & a_{1n} \\
a_{21} & a_{22} & \cdots & a_{2n} \\
\vdots & \vdots & \ddots & \vdots \\
a_{m1} & a_{m2} & \cdots & a_{mn}
\end{pmatrix}
$$

Mermaidフローチャートの作成

# システム設計書

## プロセスフロー

```mermaid
graph TD
    A[ユーザー登録] --> B{メール認証}
    B -->|成功| C[ログイン画面]
    B -->|失敗| D[エラー表示]
    C --> E[ダッシュボード]
    E --> F[機能メニュー]
    F --> G[データ管理]
    F --> H[レポート生成]
    F --> I[設定変更]

データベース設計

erDiagram
    User ||--o{ Post : writes
    User {
        int id
        string username
        string email
        datetime created_at
    }
    Post {
        int id
        int user_id
        string title
        text content
        datetime published_at
    }


#### PlantUMLシーケンス図

```markdown
## API通信シーケンス

```plantuml
@startuml
participant User
participant Frontend
participant Backend
participant Database

User -> Frontend: ログイン要求
Frontend -> Backend: 認証API呼び出し
Backend -> Database: ユーザー情報確認
Database -> Backend: 認証結果
Backend -> Frontend: JWTトークン発行
Frontend -> User: ログイン完了
@enduml


### PDF出力の詳細手順

#### 基本的な出力方法

1. **プレビューを開く**
   ```bash
   # Markdownファイルを開いた状態で右クリック
   "Markdown Preview Enhanced: Open Preview"
   
   # またはショートカット
   Ctrl+Shift+V (Windows/Linux)
   Cmd+Shift+V (Mac)

PDF出力の実行
- プレビュー画面右上の「Export」アイコンをクリック
- 「PDF」を選択
- 保存場所とファイル名を指定

高度な出力設定

---
# YAML Front Matter でのPDF設定
title: "技術仕様書"
author: "田中太郎"
date: "2024-01-15"
output:
  pdf_document:
    toc: true
    toc_depth: 3
    number_sections: true
    highlight: "github"
    theme: "readable"
---

CSSによるデザインカスタマイズ

Markdown PDFのスタイルカスタマイズ

カスタムCSSファイルの作成

/* custom-style.css */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;700&display=swap');

body {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12pt;
  line-height: 1.6;
  color: #333;
  margin: 0;
  padding: 0;
}

h1 {
  color: #2c3e50;
  border-bottom: 3px solid #3498db;
  padding-bottom: 10px;
  margin-top: 30px;
  margin-bottom: 20px;
  font-size: 24pt;
}

h2 {
  color: #34495e;
  border-left: 5px solid #3498db;
  padding-left: 15px;
  margin-top: 25px;
  margin-bottom: 15px;
  font-size: 18pt;
}

h3 {
  color: #34495e;
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 14pt;
}

/* コードブロックのスタイル */
pre {
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 15px;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 10pt;
  overflow-x: auto;
}

code {
  background-color: #f1f1f1;
  padding: 2px 4px;
  border-radius: 3px;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 90%;
}

/* テーブルのスタイル */
table {
  border-collapse: collapse;
  width: 100%;
  margin: 20px 0;
}

th, td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
  font-weight: bold;
}

tr:nth-child(even) {
  background-color: #f9f9f9;
}

/* 引用のスタイル */
blockquote {
  border-left: 4px solid #3498db;
  margin: 20px 0;
  padding-left: 20px;
  color: #666;
  font-style: italic;
}

/* リストのスタイル */
ul, ol {
  margin: 10px 0;
  padding-left: 30px;
}

li {
  margin: 5px 0;
}

/* ページ設定 */
@page {
  size: A4;
  margin: 2cm;
}

/* 印刷時の改ページ制御 */
h1, h2, h3 {
  page-break-after: avoid;
}

pre, table {
  page-break-inside: avoid;
}

VS Code設定での適用

// settings.json
{
  "markdown-pdf.styles": [
    "/Users/username/Documents/custom-style.css"
  ],
  
  // 相対パス指定も可能
  "markdown-pdf.styles": [
    "${workspaceFolder}/styles/pdf-style.css"
  ]
}

Markdown Preview Enhancedのテーマカスタマイズ

カスタムCSSの適用方法

設定ファイルの編集
- コマンドパレット → “Markdown Preview Enhanced: Customize CSS”
- style.lessファイルが開かれる
カスタムスタイルの記述

// style.less
.markdown-preview.markdown-preview {
  // フォント設定
  font-family: 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif;
  font-size: 14px;
  line-height: 1.7;
  
  // ヘッダースタイル
  h1, h2, h3, h4, h5, h6 {
    color: #2c3e50;
    font-weight: 600;
  }
  
  h1 {
    border-bottom: 2px solid #3498db;
    padding-bottom: 10px;
  }
  
  h2 {
    border-left: 4px solid #3498db;
    padding-left: 10px;
  }
  
  // コードハイライト
  .hljs {
    background: #f8f8f8;
    border-radius: 6px;
    padding: 16px;
  }
  
  // テーブルスタイル
  table {
    border-radius: 6px;
    overflow: hidden;
    
    th {
      background-color: #34495e;
      color: white;
    }
  }
  
  // PDF出力時の設定
  @media print {
    .pageNumber:before {
      content: counter(page);
    }
    
    .totalPages:before {
      content: counter(pages);
    }
  }
}

用途別の最適化設定

技術文書・API仕様書

// 技術文書用設定
{
  "markdown-pdf.format": "A4",
  "markdown-pdf.displayHeaderFooter": true,
  "markdown-pdf.headerTemplate": "<div style='font-size:10px; width:100%; text-align:center; color:#666;'><span class='title'></span> - <span class='date'></span></div>",
  "markdown-pdf.footerTemplate": "<div style='font-size:10px; width:100%; text-align:center; color:#666;'>Page <span class='pageNumber'></span> of <span class='totalPages'></span></div>",
  "markdown-pdf.margin.top": "2cm",
  "markdown-pdf.margin.bottom": "2cm"
}

議事録・レポート

// 議事録用設定
{
  "markdown-pdf.format": "A4",
  "markdown-pdf.landscape": false,
  "markdown-pdf.displayHeaderFooter": true,
  "markdown-pdf.headerTemplate": "<div style='font-size:12px; margin-left:1cm; color:#333;'>会議議事録 - <span class='date'></span></div>",
  "markdown-pdf.footerTemplate": "<div style='font-size:10px; text-align:center; width:100%; color:#666;'>機密情報 - Page <span class='pageNumber'></span></div>"
}

プレゼンテーション資料

---
# プレゼンテーション用設定
title: "新製品発表会"
author: "田中太郎"
theme: "presentation"
---

# 新製品の紹介

---

## 製品概要

### 主な特徴
- 高性能
- 省エネルギー
- ユーザーフレンドリー

---

## 市場分析

```mermaid
pie title 市場シェア
    "競合A" : 35
    "競合B" : 25
    "我が社" : 40

今後の展望

目標

シェア50%達成
新市場への展開
技術革新の継続


## バッチ処理と自動化

### 複数ファイルの一括変換

#### PowerShellスクリプト（Windows）

```powershell
# markdown-to-pdf.ps1
param(
    [string]$InputDir = ".",
    [string]$OutputDir = "./pdf"
)

# 出力ディレクトリの作成
if (!(Test-Path $OutputDir)) {
    New-Item -ItemType Directory -Force -Path $OutputDir
}

# Markdownファイルの検索と変換
Get-ChildItem -Path $InputDir -Filter "*.md" | ForEach-Object {
    $inputFile = $_.FullName
    $outputFile = Join-Path $OutputDir ($_.BaseName + ".pdf")
    
    Write-Host "Converting: $($_.Name) -> $($_.BaseName).pdf"
    
    # VS Codeコマンドラインインターフェースを使用
    code --new-window $inputFile
    Start-Sleep -Seconds 2
    
    # 変換コマンドの実行（拡張機能APIを使用）
    # 注意: 実際の自動化にはPandocなどの外部ツールを推奨
}

Write-Host "変換完了"

Bashスクリプト（macOS/Linux）

#!/bin/bash
# markdown-to-pdf.sh

INPUT_DIR="${1:-.}"
OUTPUT_DIR="${2:-./pdf}"

# 出力ディレクトリの作成
mkdir -p "$OUTPUT_DIR"

# Markdownファイルの検索と変換
find "$INPUT_DIR" -name "*.md" -type f | while read -r file; do
    filename=$(basename "$file" .md)
    output_file="$OUTPUT_DIR/${filename}.pdf"
    
    echo "Converting: $(basename "$file") -> ${filename}.pdf"
    
    # Pandocを使用した変換（推奨）
    if command -v pandoc &> /dev/null; then
        pandoc "$file" -o "$output_file" \
            --pdf-engine=xelatex \
            --variable mainfont="Noto Sans CJK JP" \
            --variable geometry:margin=2cm
    else
        echo "Pandocが見つかりません。手動で変換してください。"
    fi
done

echo "変換完了"

CI/CDでの自動PDF生成

GitHub Actionsの例

# .github/workflows/generate-pdf.yml
name: Generate PDF Documentation

on:
  push:
    branches: [ main ]
    paths: [ 'docs/**/*.md' ]
  pull_request:
    branches: [ main ]
    paths: [ 'docs/**/*.md' ]

jobs:
  generate-pdf:
    runs-on: ubuntu-latest
    
    steps:
    - uses: actions/checkout@v3
    
    - name: Setup Node.js
      uses: actions/setup-node@v3
      with:
        node-version: '18'
    
    - name: Install Pandoc
      run: |
        sudo apt-get update
        sudo apt-get install -y pandoc texlive-xetex texlive-fonts-recommended
    
    - name: Install fonts
      run: |
        sudo apt-get install -y fonts-noto-cjk
    
    - name: Convert Markdown to PDF
      run: |
        mkdir -p output
        find docs -name "*.md" -type f | while read file; do
          filename=$(basename "$file" .md)
          pandoc "$file" -o "output/${filename}.pdf" \
            --pdf-engine=xelatex \
            --variable mainfont="Noto Sans CJK JP" \
            --variable geometry:margin=2cm \
            --toc \
            --number-sections
        done
    
    - name: Upload PDF artifacts
      uses: actions/upload-artifact@v3
      with:
        name: pdf-documentation
        path: output/*.pdf

トラブルシューティング

よくある問題と解決法

1. 日本語フォントが正しく表示されない

症状： PDF内の日本語が文字化けまたは表示されない

解決法：

// settings.json
{
  "markdown-pdf.executablePath": "", // Chrome/Chromiumのパス
  "markdown-pdf.args": [
    "--no-sandbox",
    "--disable-setuid-sandbox",
    "--font-render-hinting=none"
  ],
  "markdown-pdf.styles": [
    "https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;700&display=swap"
  ]
}

/* カスタムCSS */
body {
  font-family: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif;
}

2. 画像が表示されない

症状： Markdown内の画像がPDFに含まれない

解決法：

<!-- 相対パス（推奨） -->
![説明文](./images/diagram.png)

<!-- 絶対パス -->
![説明文](file:///absolute/path/to/image.png)

<!-- Base64エンコード（小さい画像向け） -->
![説明文](data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...)

// settings.json - 画像関連設定
{
  "markdown-pdf.convertOnSave": false,
  "markdown-pdf.convertOnSaveExclude": [],
  "markdown-pdf.outputDirectory": "",
  "markdown-pdf.outputDirectoryRelativePathFile": false
}

3. 数式が表示されない（MPEの場合）

症状： LaTeX数式がPDFで正しくレンダリングされない

解決法：

// settings.json
{
  "markdown-preview-enhanced.mathRenderingOption": "KaTeX",
  "markdown-preview-enhanced.mathInlineDelimiters": [
    ["$", "$"],
    ["\\(", "\\)"]
  ],
  "markdown-preview-enhanced.mathBlockDelimiters": [
    ["$$", "$$"],
    ["\\[", "\\]"]
  ]
}

4. テーブルがページを越える

症状： 大きなテーブルが複数ページにまたがる際のレイアウト崩れ

解決法：

/* カスタムCSS */
table {
  page-break-inside: auto;
}

tr {
  page-break-inside: avoid;
  page-break-after: auto;
}

thead {
  display: table-header-group;
}

tfoot {
  display: table-footer-group;
}

5. プレビューとPDF出力の差異

症状： プレビューとPDFの見た目が異なる

解決法：

// settings.json - 出力設定の統一
{
  "markdown-pdf.breaks": false,
  "markdown-pdf.emoji": true,
  "markdown-pdf.enableSourceMap": false,
  "markdown-pdf.puppeteerWaitForTimeout": 3000
}

デバッグ方法

変換プロセスの確認

// settings.json - デバッグ設定
{
  "markdown-pdf.debug": true,
  "markdown-pdf.convertOnSave": false
}

ログの確認方法

VS Codeの出力パネルを開く（View → Output）
「Markdown PDF」を選択
エラーメッセージや警告を確認

まとめ：VS CodeでMarkdown→PDF変換をマスターしよう

VS CodeのMarkdown PDF変換機能を活用することで、効率的なドキュメント作成ワークフローを構築できます。

今回学んだ重要ポイント

拡張機能の選択: 用途に応じてMarkdown PDFまたはMPEを選択
カスタマイズ: CSSやYAML Front Matterでの詳細設定
高機能活用: 数式、図表、プレゼンテーション対応
自動化: バッチ処理やCI/CDでの効率化
トラブル対応: よくある問題の解決方法

用途別おすすめ拡張機能

用途	推奨拡張機能	理由
一般文書	Markdown PDF	シンプル、軽量、確実
技術文書	Markdown Preview Enhanced	数式、図表対応
学術文書	Markdown Preview Enhanced	高度な数式レンダリング
プレゼン資料	Markdown Preview Enhanced	豊富な表現機能

なぜVS CodeでMarkdown→PDF変換が便利なのか？

従来の方法との比較

VS Code拡張機能のメリット

おすすめ拡張機能の詳細比較

主要な拡張機能一覧

Markdown PDF – シンプルで確実な変換

基本情報と特徴

インストールと基本設定

インストール手順

基本的な使用方法

基本設定の最適化

実践的な使用例

基本的なMarkdownファイルの例

PDF出力結果の特徴

Markdown Preview Enhanced – 高機能なプレビューと変換

基本情報と特徴

インストールと設定

インストール手順

基本設定

高度な機能の活用

数式の記述と出力

Mermaidフローチャートの作成

データベース設計

高度な出力設定

CSSによるデザインカスタマイズ

Markdown PDFのスタイルカスタマイズ

カスタムCSSファイルの作成

VS Code設定での適用

Markdown Preview Enhancedのテーマカスタマイズ

カスタムCSSの適用方法

用途別の最適化設定

技術文書・API仕様書

議事録・レポート

プレゼンテーション資料

今後の展望

目標

Bashスクリプト（macOS/Linux）

CI/CDでの自動PDF生成

GitHub Actionsの例

トラブルシューティング

よくある問題と解決法

1. 日本語フォントが正しく表示されない

2. 画像が表示されない

3. 数式が表示されない（MPEの場合）

4. テーブルがページを越える

5. プレビューとPDF出力の差異

デバッグ方法

変換プロセスの確認

ログの確認方法

まとめ：VS CodeでMarkdown→PDF変換をマスターしよう

今回学んだ重要ポイント

用途別おすすめ拡張機能

Youtube

カテゴリー別人気記事

コメント