VSCode Markdownプレビュー印刷完全ガイド｜きれいにPDF化して共有する方法

プログラミング・IT

「VSCodeで書いたMarkdownを印刷したいけど、どうすればいい？」 「プレビューは見やすいのに、印刷すると崩れる…」 「PDFにしてクライアントに送りたい…」

VSCodeでMarkdownを書いている方なら、一度は印刷で悩んだことがあるはず。実は、VSCodeには標準機能と拡張機能を組み合わせることで、美しい印刷物を作る方法があるんです。

この記事では、基本的な印刷方法から、見栄えの良いPDF作成、さらにはカスタマイズまで、詳しく解説していきます。

スポンサーリンク

Markdownプレビューの基本操作

プレビューを表示する3つの方法

方法1：ショートカットキー（最速！）

  • Ctrl+Shift+V（Mac: Cmd+Shift+V）
  • 別タブでプレビューが開く

方法2：サイドバイサイド表示

  • Ctrl+K V（Mac: Cmd+K V）
  • エディタとプレビューを並べて表示
  • リアルタイムで確認しながら編集できる！

方法3：コマンドパレット

  1. Ctrl+Shift+P でコマンドパレット
  2. 「Markdown: Open Preview」と入力
  3. 選択して実行

プレビューの同期設定

// settings.json
{
  // スクロール同期を有効化
  "markdown.preview.scrollEditorWithPreview": true,
  "markdown.preview.scrollPreviewWithEditor": true,
  
  // プレビューを自動更新
  "markdown.preview.autoRefresh": true
}

標準機能での印刷方法（シンプルだけど制限あり）

基本的な印刷手順

  1. Markdownファイルを開く
  2. Ctrl+Shift+V でプレビュー表示
  3. プレビュー画面で右クリック
  4. 「印刷」を選択
  5. ブラウザの印刷ダイアログが開く

この方法の問題点

よくある困りごと：

  • スタイルが崩れる
  • コードブロックが見切れる
  • 画像サイズが調整できない
  • ヘッダー・フッターが邪魔

でも大丈夫！次に紹介する拡張機能で解決できます。

おすすめ拡張機能で美しく印刷

1. Markdown PDF（最も人気！）

インストール方法：

  1. 拡張機能ビューを開く（Ctrl+Shift+X）
  2. 「Markdown PDF」を検索
  3. yzane作のものをインストール

使い方：

  1. Markdownファイルを開く
  2. Ctrl+Shift+P でコマンドパレット
  3. **「Markdown PDF: Export」**を選択
  4. 形式を選ぶ（PDF/HTML/PNG/JPEG）

メリット：

  • 日本語対応が完璧
  • 目次の自動生成
  • カスタムCSSが使える
  • ヘッダー・フッターのカスタマイズ

2. Markdown Preview Enhanced（高機能！）

特徴：

  • プレビューから直接印刷
  • 数式（LaTeX）対応
  • グラフ描画（mermaid）対応
  • プレゼンテーション作成も可能

印刷方法：

  1. プレビューを開く（Ctrl+K V）
  2. プレビュー右上の「≡」メニュー
  3. 「Chrome (Puppeteer) -> PDF」を選択

3. Print（シンプル印刷）

特徴：

  • 軽量で高速
  • 設定不要ですぐ使える
  • コードファイルの印刷にも対応

Markdown PDFの詳細設定

基本設定（settings.json）

{
  // 出力形式のデフォルト
  "markdown-pdf.type": "pdf",
  
  // 用紙サイズ
  "markdown-pdf.format": "A4",
  
  // 余白設定（上、下、左、右）
  "markdown-pdf.margin.top": "2cm",
  "markdown-pdf.margin.bottom": "2cm",
  "markdown-pdf.margin.left": "2cm",
  "markdown-pdf.margin.right": "2cm",
  
  // 改ページ設定
  "markdown-pdf.breaks": true,
  
  // 目次の自動生成
  "markdown-pdf.displayHeaderFooter": true
}

ヘッダー・フッター設定

{
  // ヘッダー
  "markdown-pdf.headerTemplate": "<div style='font-size: 9px; margin-left: 1cm;'><span>ドキュメントタイトル</span></div>",
  
  // フッター（ページ番号付き）
  "markdown-pdf.footerTemplate": "<div style='font-size: 9px; margin: 0 auto;'><span class='pageNumber'></span> / <span class='totalPages'></span></div>"
}

カスタムCSSで見栄えを劇的に改善

スタイルシートの作成

markdown-pdf.css を作成：

/* 基本フォント設定 */
body {
  font-family: "游ゴシック", "Yu Gothic", sans-serif;
  font-size: 12pt;
  line-height: 1.6;
  color: #333;
}

/* 見出しのスタイル */
h1 {
  color: #2c3e50;
  border-bottom: 3px solid #3498db;
  padding-bottom: 10px;
  page-break-after: avoid;
}

h2 {
  color: #34495e;
  border-left: 5px solid #3498db;
  padding-left: 10px;
  page-break-after: avoid;
}

/* コードブロック */
pre {
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 10px;
  overflow-x: auto;
  page-break-inside: avoid;
}

/* テーブル */
table {
  border-collapse: collapse;
  width: 100%;
  page-break-inside: avoid;
}

th {
  background-color: #3498db;
  color: white;
  padding: 10px;
}

td {
  border: 1px solid #ddd;
  padding: 8px;
}

/* 印刷時の改ページ制御 */
@media print {
  h1, h2, h3 {
    page-break-after: avoid;
  }
  
  pre, table, blockquote {
    page-break-inside: avoid;
  }
}

CSSの適用方法

// settings.json
{
  "markdown-pdf.styles": [
    "file:///C:/Users/username/markdown-pdf.css"
  ],
  
  // または相対パス
  "markdown-pdf.styles": [
    "./styles/markdown-pdf.css"
  ]
}

日本語フォントの設定

Windows環境

{
  "markdown-pdf.executablePath": "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe",
  
  // 日本語フォント指定
  "markdown-pdf.styles": [
    "body { font-family: 'メイリオ', Meiryo, sans-serif; }"
  ]
}

Mac環境

{
  // 日本語フォント指定
  "markdown-pdf.styles": [
    "body { font-family: 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', sans-serif; }"
  ]
}

Webフォントの使用

/* Google Fontsを使う */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');

body {
  font-family: 'Noto Sans JP', sans-serif;
}

画像とコードの印刷最適化

画像サイズの調整

Markdown内で指定：

<!-- 幅を指定 -->
![画像](image.png){width=500px}

<!-- パーセント指定 -->
![画像](image.png){width=80%}

CSSで一括調整：

img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  page-break-inside: avoid;
}

コードブロックの折り返し設定

/* コードの折り返し */
pre code {
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* 行番号を追加 */
pre {
  counter-reset: line;
}

pre code::before {
  counter-increment: line;
  content: counter(line);
  display: inline-block;
  width: 2em;
  color: #999;
}

目次の自動生成

Markdown PDFでの目次生成

Markdown内に記述：

# 目次
[[toc]]

# 第1章
## 1.1 はじめに
## 1.2 基本設定

# 第2章
## 2.1 応用編

手動で目次を作成

# 目次
- [第1章 はじめに](#第1章-はじめに)
  - [1.1 概要](#11-概要)
  - [1.2 準備](#12-準備)
- [第2章 実践](#第2章-実践)
  - [2.1 基本操作](#21-基本操作)

トラブルシューティング

Q1: 日本語が文字化けする

解決方法：

{
  "markdown-pdf.convertOnSave": false,
  "markdown-pdf.outputDirectory": "./pdf",
  "markdown-pdf.executablePath": "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe"
}

Q2: 画像が表示されない

チェックポイント：

  • 相対パスで指定しているか
  • 画像ファイルが存在するか
  • 拡張子は正しいか（大文字小文字も）

解決例：

<!-- ❌ 絶対パス -->
![画像](C:\Users\name\image.png)

<!-- ✅ 相対パス -->
![画像](./images/image.png)

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

圧縮設定：

{
  "markdown-pdf.quality": 75,  // 画質を調整（0-100）
  "markdown-pdf.scale": 0.8    // スケールを調整
}

Q4: 改ページが変な位置に入る

CSSで制御：

/* 見出し前で改ページ */
h1 {
  page-break-before: always;
  page-break-after: avoid;
}

/* テーブル内での改ページを防ぐ */
table {
  page-break-inside: avoid;
}

用途別おすすめ設定

ドキュメント用（仕様書・マニュアル）

{
  "markdown-pdf.format": "A4",
  "markdown-pdf.displayHeaderFooter": true,
  "markdown-pdf.margin.top": "2.5cm",
  "markdown-pdf.margin.bottom": "2.5cm",
  
  // 目次を含める
  "markdown-pdf.includeDefaultStyles": false,
  "markdown-pdf.styles": ["./styles/document.css"]
}

プレゼン資料用

{
  "markdown-pdf.format": "A4",
  "markdown-pdf.orientation": "landscape",  // 横向き
  "markdown-pdf.margin.top": "1cm",
  "markdown-pdf.margin.bottom": "1cm",
  
  // ページ番号のみ
  "markdown-pdf.displayHeaderFooter": true,
  "markdown-pdf.headerTemplate": "",
  "markdown-pdf.footerTemplate": "<div style='font-size: 10px;'><span class='pageNumber'></span></div>"
}

ブログ記事用

{
  "markdown-pdf.format": "A4",
  "markdown-pdf.margin.top": "1.5cm",
  "markdown-pdf.margin.bottom": "1.5cm",
  "markdown-pdf.margin.left": "2cm",
  "markdown-pdf.margin.right": "2cm",
  
  // シンプルなスタイル
  "markdown-pdf.includeDefaultStyles": true
}

HTML経由での高度な印刷テクニック

MarkdownをHTMLに変換して印刷

手順：

  1. Markdown PDF で HTMLエクスポート
  2. ブラウザで開く
  3. ブラウザの印刷機能を使用

メリット：

  • ブラウザの印刷プレビューが使える
  • より細かい調整が可能
  • JavaScriptも動作する

Pandocを使った変換（上級者向け）

コマンド：

# PDFに変換
pandoc input.md -o output.pdf --pdf-engine=lualatex

# HTMLに変換
pandoc input.md -o output.html --standalone --css=style.css

まとめ：今すぐ実践できる3つのステップ

VSCodeでのMarkdown印刷、これでもう迷うことはありません！

今日から始める3つのステップ：

  1. Markdown PDF拡張機能をインストール まずはこれだけで、きれいなPDFが作れます
  2. 基本的なCSSを作成して適用 フォントと余白を調整するだけで見違える仕上がりに
  3. 用途に合わせて設定を保存 ドキュメント用、プレゼン用など、プリセットを作っておく

重要なポイント：

  • 日本語フォントの設定は必須
  • 改ページ位置はCSSで制御
  • 画像は相対パスで指定

Markdownの良さは、書くことに集中できること。そして、この記事の方法を使えば、美しい印刷物も簡単に作れます。

仕様書、マニュアル、レポート、何でもMarkdownで書いて、プロフェッショナルな見た目で印刷・PDF化しましょう。

さあ、Ctrl+Shift+Xを押して、Markdown PDFをインストールしてみてください。きっと印刷物のクオリティに驚くはずです！

Youtube

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

スポンサーリンク

コメント

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