VS CodeでMarkdownプレビューをもっと便利にするおすすめ拡張機能｜リアルタイム反映・数式・図表まで

プログラミング・IT

「VS CodeでMarkdownを書いているけど、標準のプレビューだけだとちょっと物足りない」
「数式やフローチャートもプレビューしたい」
「PDFにきれいに出力したい」

と思ったことはありませんか？

VS Codeには、Markdownをもっと強化できる便利な拡張機能が多数あります。

この記事では、以下の内容について詳しく解説します：

  • VS Code標準のMarkdownプレビュー機能の確認
  • おすすめのMarkdownプレビュー拡張機能
  • 数式や図表の表示方法
  • PDF出力の方法
  • 効率的な設定とカスタマイズ
  • 実際の使用例とコツ

Markdownプレビューを快適にして、文書作成の効率を大幅にアップさせましょう！

スポンサーリンク

VS Code標準のMarkdownプレビュー機能

基本的な使い方

VS Codeは何も拡張機能を入れなくても、.md ファイルでMarkdownプレビューが使えます。

プレビューを開く方法

方法1: キーボードショートカット

Ctrl + K → V (Windows/Linux)
Cmd + K → V (Mac)

方法2: コマンドパレット

  1. Ctrl + Shift + P でコマンドパレットを開く
  2. 「Markdown: Open Preview to the Side」を選択

方法3: エディタ右上のアイコン エディタ右上の「Split Editor and Preview」アイコンをクリック

標準機能でできること

リアルタイムプレビュー

  • ファイルを編集すると自動的にプレビューが更新
  • スクロール位置も同期される
  • 見出しジャンプ機能でナビゲーション可能

基本的な表示要素

  • 見出し（H1〜H6）
  • リスト（箇条書き・番号付き）
  • テーブル
  • コードブロック（シンタックスハイライト付き）
  • リンクと画像
  • 引用
  • 太字・斜体

標準機能の限界

しかし、標準機能では以下のような高度な機能は使えません：

  • 数式（LaTeX記法）の表示
  • フローチャート（Mermaid、PlantUML）
  • PDF出力
  • カスタムCSSの適用
  • プラグインによる機能拡張

そこで拡張機能の出番です。

おすすめMarkdownプレビュー拡張機能

Markdown All in One

何ができる？ VS CodeでMarkdownを書くならまず入れたい定番拡張機能です。プレビュー機能の強化というより、Markdownの編集支援に特化しています。

主な機能

見出し管理

  • 見出しの折りたたみ
  • 見出しへのジャンプ
  • 目次（TOC）の自動生成

テーブル編集

  • テーブルの自動整形
  • 列の自動調整
  • セルのTab移動

チェックリスト

  • - [ ] と - [x] をGUIで切り替え
  • タスク管理に便利

ショートカット強化

  • Ctrl + B で太字
  • Ctrl + I で斜体
  • Alt + S で取り消し線

インストールと設定

インストール方法

  1. 拡張機能で「Markdown All in One」を検索
  2. インストールボタンをクリック

おすすめ設定

{
  "markdown.extension.toc.updateOnSave": true,
  "markdown.extension.preview.autoShowPreviewToSide": true,
  "markdown.extension.list.indentationSize": "inherit"
}

Markdown Preview Enhanced

何ができる？ 数式・図表・チャートなどの高度な表示に対応した最強のMarkdownプレビュー拡張機能です。

対応している記法

数式表示

  • MathJax / KaTeX による数式レンダリング
  • インライン数式：$E = mc^2$
  • ブロック数式：
$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$

図表・チャート

  • Mermaid：フローチャート、シーケンス図
  • PlantUML：UML図
  • Graphviz：グラフ描画
  • Chart.js：グラフ・チャート

コードの実行

  • JavaScript、Python、R などのコード実行
  • 結果をプレビューに直接表示

使い方

プレビューを開く

  • Ctrl + Shift + V でMarkdown Preview Enhancedのプレビュー
  • または右クリック → 「MPE: Open Preview to the Side」

Mermaidフローチャートの例

```mermaid
graph TD
    A[開始] --> B{条件分岐}
    B -->|Yes| C[処理1]
    B -->|No| D[処理2]
    C --> E[終了]
    D --> E
```

数式の例

## 二次方程式の解の公式

$$x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$$

円の面積：$S = \pi r^2$

高機能なエクスポート

対応形式

  • PDF（印刷品質）
  • HTML（スタンドアロン）
  • PNG（画像）
  • JPEG
  • EPUB（電子書籍）

エクスポート方法

  1. プレビュー画面で右クリック
  2. 「Export」から形式を選択
  3. 保存先を指定

Markdown PDF

何ができる？ MarkdownをシンプルにPDF化することに特化した拡張機能です。

特徴

ワンコマンドでPDF化

  • コマンドパレット（Ctrl + Shift + P）から
  • 「Markdown PDF: Export (pdf)」を選択するだけ

対応出力形式

  • PDF
  • HTML
  • PNG
  • JPEG

カスタマイズ機能

  • CSS でスタイルをカスタマイズ
  • ヘッダー・フッター の設定
  • マージン の調整

設定例

{
  "markdown-pdf.format": "A4",
  "markdown-pdf.margin.top": "1.5cm",
  "markdown-pdf.margin.bottom": "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 Shortcuts

何ができる？ Markdownの記法をショートカットやボタンで簡単に入力できるようにする拡張機能です。

主な機能

ツールバーボタン

  • エディタ上部にMarkdownボタンを表示
  • 太字、斜体、リンクなどをワンクリック

キーボードショートカット

  • Ctrl + M, Ctrl + B：太字
  • Ctrl + M, Ctrl + I：斜体
  • Ctrl + M, Ctrl + L：リンク

コンテキストメニュー

  • 右クリックメニューにMarkdown機能を追加

Markdown Lint

何ができる？ Markdownの書式チェックとエラー検出を行う拡張機能です。

機能

文法チェック

  • Markdownの記法ミスを検出
  • 見出しレベルの一貫性チェック
  • リンクの妥当性確認

スタイルチェック

  • 行の長さ の制限
  • 空行 の規則チェック
  • インデント の統一性

実際の使用例とワークフロー

ブログ記事作成のワークフロー

準備

  1. Markdown All in One で編集環境を整備
  2. Markdown Preview Enhanced でリアルタイムプレビュー
  3. 必要に応じて Markdown PDF でPDF出力

実際の作業手順

ステップ1: 構成作成

# ブログタイトル

## 目次
- [はじめに](#はじめに)
- [本文](#本文)
- [まとめ](#まとめ)

## はじめに

## 本文

## まとめ

ステップ2: 図表の追加

```mermaid
graph LR
    A[記事企画] --> B[執筆]
    B --> C[校正]
    C --> D[公開]
```

ステップ3: 数式の追加

## 計算式

売上成長率：
$$成長率 = \frac{今年の売上 - 昨年の売上}{昨年の売上} \times 100$$

技術文書作成のワークフロー

API仕様書の例

基本情報

# API仕様書

## 概要
- バージョン: v1.0
- ベースURL: `https://api.example.com/v1`

## 認証
Bearer Token方式

フローチャート

```mermaid
sequenceDiagram
    participant Client
    participant API
    participant DB
    
    Client->>API: POST /login
    API->>DB: ユーザー認証
    DB-->>API: 認証結果
    API-->>Client: トークン返却
```

コードサンプル

## サンプルコード

```javascript
// APIリクエストの例
const response = await fetch('/api/users', {
  method: 'GET',
  headers: {
    'Authorization': 'Bearer ' + token
  }
});

学術論文・レポート作成

数式を多用する文書

# 統計解析レポート

## 回帰分析

線形回帰モデル：
$$y = \beta_0 + \beta_1 x_1 + \beta_2 x_2 + \epsilon$$

決定係数：
$$R^2 = 1 - \frac{SS_{res}}{SS_{tot}}$$

## データ可視化

```mermaid
graph TD
    A[データ収集] --> B[前処理]
    B --> C[探索的データ分析]
    C --> D[モデル構築]
    D --> E[評価]

便利な設定とカスタマイズ

自動プレビュー表示の設定

settings.jsonでの設定

{
  "markdown.preview.openMarkdownLinks": "inEditor",
  "markdown.preview.scrollPreviewWithEditor": true,
  "markdown.preview.scrollEditorWithPreview": true,
  "markdown.preview.doubleClickToSwitchToEditor": true
}

カスタムCSSの適用

独自スタイルの設定

{
  "markdown.styles": [
    "path/to/custom.css"
  ]
}

custom.cssの例

/* コードブロックのスタイル */
pre {
  background-color: #f8f8f8;
  border-radius: 5px;
  padding: 1em;
}

/* 見出しのスタイル */
h1, h2, h3 {
  border-bottom: 2px solid #eee;
  padding-bottom: 0.3em;
}

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

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

キーボードショートカットのカスタマイズ

keybindings.jsonでの設定

[
  {
    "key": "ctrl+shift+m",
    "command": "markdown.showPreviewToSide",
    "when": "editorLangId == markdown"
  },
  {
    "key": "ctrl+k ctrl+m",
    "command": "markdown.showPreview",
    "when": "editorLangId == markdown"
  }
]

トラブルシューティング

よくある問題と解決方法

プレビューが表示されない

原因と解決方法

  1. ファイル拡張子の確認：.md または .markdown になっているか
  2. 言語モードの確認：右下の言語表示が「Markdown」になっているか
  3. 拡張機能の再読み込み：VS Code を再起動

数式が表示されない

Markdown Preview Enhanced での確認

  • MathJax が有効になっているか設定を確認
  • 数式の記法が正しいか確認（$ と $$ の使い分け）

設定例

{
  "markdown-preview-enhanced.mathRenderingOption": "KaTeX",
  "markdown-preview-enhanced.enableTypographer": true
}

PDF出力がうまくいかない

Markdown PDF の場合

  1. Chromium の確認：拡張機能が内部で使用するChromiumが正しくインストールされているか
  2. パスの確認：日本語を含むパスで問題が起きる場合がある
  3. 権限の確認：出力先フォルダの書き込み権限

画像が表示されない

相対パスの確認

<!-- ✅ 正しい例 -->
![画像](./images/sample.png)

<!-- ❌ 間違った例 -->
![画像](C:\Users\...\images\sample.png)

ワークスペース設定

{
  "markdown.preview.breaks": true,
  "markdown.preview.linkify": true
}

応用テクニックと高度な使い方

プレゼンテーション作成

reveal.js との連携 Markdown Preview Enhanced では、reveal.js を使ったスライドショーが作成できます。

---
presentation:
  theme: sky
---

<!-- slide -->
# タイトルスライド

---

<!-- slide -->
## 内容1

- ポイント1
- ポイント2
- ポイント3

---

<!-- slide -->
## 内容2

```mermaid
graph LR
    A --> B
    B --> C


### インタラクティブな要素

**コードの実行結果表示**
````markdown
```javascript {cmd=true}
// このJavaScriptコードが実行される
console.log("Hello, World!");
const result = 2 + 3;
console.log(`2 + 3 = ${result}`);


**グラフの動的生成**
````markdown
```javascript {cmd=true matplotlib=true}
// Pythonでグラフ生成
import matplotlib.pyplot as plt
import numpy as np

x = np.linspace(0, 2*np.pi, 100)
y = np.sin(x)

plt.plot(x, y)
plt.title('Sine Wave')
plt.show()
```

チーム開発での活用

文書管理のベストプラクティス

ディレクトリ構成例

project/
├── docs/
│   ├── README.md
│   ├── API.md
│   ├── SETUP.md
│   └── images/
├── .vscode/
│   └── settings.json
└── .gitignore

共通設定の管理

// .vscode/settings.json
{
  "markdown.preview.openMarkdownLinks": "inEditor",
  "markdown-preview-enhanced.automaticallyShowPreviewOfMarkdownBeingEdited": true,
  "markdown-pdf.format": "A4",
  "markdown-pdf.margin.top": "1.5cm"
}

まとめ

VS CodeでMarkdownを本格的に活用するには、以下の拡張機能の組み合わせがおすすめです：

基本セット（すべてのユーザー向け）

  • Markdown All in One – 編集支援の基本
  • Markdown Preview Enhanced – 高機能プレビュー
  • Markdown PDF – PDF出力

用途別の追加拡張

ブログ・文書作成者向け

  • Markdown Shortcuts – 記法入力の効率化
  • Markdown Lint – 品質管理

技術者・研究者向け

  • PlantUML – UML図の詳細制御
  • Mermaid Preview – フローチャートの専用プレビュー

チーム開発向け

  • Markdown TOC – 目次の自動管理
  • Docs Authoring Pack – Microsoft製の文書作成支援

効果的な使い方のコツ

  1. 段階的に拡張機能を追加 – 一度にすべて入れず、必要に応じて追加
  2. ショートカットを覚える – 作業効率が大幅に向上
  3. テンプレートを活用 – よく使う構成はテンプレート化
  4. 設定をチーム共有 – .vscode/settings.json で環境を統一

Youtube

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

スポンサーリンク

コメント

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