VS Code マークダウンプレビューの使い方完全ガイド｜ショートカット・おすすめ拡張機能・動かない時の対処法

プログラミングやドキュメント作成、ブログ執筆、メモ管理など、幅広い用途で絶大な人気を誇るコードエディタ「VS Code（Visual Studio Code）」。その魅力の1つが、標準で搭載されている非常に強力かつ軽快な「マークダウン（Markdown）リアルタイムプレビュー機能」です。

「VS Codeでマークダウンのプレビューをエディタの横に並べてリアルタイム表示したい（vscode マークダウン プレビュー / vscode md プレビュー）」「プレビューを開くショートカットキー（vscode markdown preview ショートカット）をすぐに知りたい」「エディタとプレビューのスクロールを同期・連動させる方法は？」「Markdown All in One や Markdown Preview Enhanced などの拡張機能を入れると何ができる？」「プレビューが出ない・真っ白になる（vscode プレビュー 出ない）時の原因と対処法は？」といった疑問やトラブルを抱えていないでしょうか。

VS CodeのMarkdownプレビュー機能は、ショートカットキー1つで瞬時に呼び出せるだけでなく、スクロールの自動同期、CSSカスタマイズ、セキュリティ設定など実用的な機能が標準で揃っています。さらに定番の拡張機能を組み合わせることで、目次の自動生成、Mermaidダイアグラム作図、数式レンダリング、ワンクリックPDF書き出しまで、あらゆる執筆作業をVS Code単体で完結させることが可能です。

この記事では、VS Codeでマークダウンプレビューを使いこなすための基本操作・ショートカット一覧（Windows/Mac対応）から、同期スクロールなどの便利設定、おすすめの神拡張機能3選、プレビューが表示されない・動かない時のトラブルシューティングまで、図解・設定例を交えて網羅的に徹底解説します！

【早見表】VS Code マークダウンプレビューのショートカット＆開き方一覧

VS CodeでMarkdownファイル（.md）のプレビューを開く方法は主に「ショートカットキー」「エディタ右上のアイコン」「コマンドパレット」の3通りあります。まずは最もよく使うショートカットキー（vscode markdown preview ショートカット）と操作手順を早見表で確認しましょう。

VS Code 標準マークダウンプレビューの基本操作＆便利設定

VS CodeのMarkdownプレビューは、単にHTMLを描画するだけでなく、執筆者の作業効率を高める多彩な機能と詳細なカスタマイズ設定が用意されています。

1. 左右分割（Side by Side）でのリアルタイムプレビュー

最も定番かつ実用的な執筆スタイルが、エディタを左右に2分割し、左側でMarkdownテキストを打ち込みながら、右側でリアルタイムにレンダリング結果を確認する方法です。

• Markdownファイル（.md）を開いた状態で Ctrl + K, V（Mac: Cmd + K, V）を押す。
• 左側のエディタに文字や見出し（#）、リスト（-）、太字（**）を入力した瞬間、右側のプレビュー画面へミリ秒単位で即時反映されます。
• エディタ側のタブやプレビュー側のタブは、ドラッグ＆ドロップで上下分割に変更したり、別のウィンドウ（マルチディスプレイ）へ切り離して配置することも可能です。

2. スクロール連動（同期スクロール）の設定と解除

VS Codeのマークダウンプレビューは、「エディタ側のスクロール」と「プレビュー側のスクロール」が自動的に連動（同期スクロール）します。長文のドキュメントを執筆している際も、常に今書いている箇所がプレビューの中央付近に表示されるため、手動でスクロール位置を調整するストレスがありません。

もし「スクロール連動を一時的にオフにしたい」「プレビューを固定したままエディタをスクロールしたい」という場合は、設定画面（Ctrl + , / Mac: Cmd + ,）で markdown.preview.scroll と検索するか、settings.json に以下の設定を追加します。

{
  // エディタをスクロールした時にプレビューを連動させる（初期値: true）
  "markdown.preview.scrollPreviewWithEditor": true,

  // プレビューをスクロールした時にエディタを連動させる（初期値: true）
  "markdown.preview.scrollEditorWithPreview": true
}

3. セキュリティ設定（Content Security Policy）の変更

VS Codeのプレビュー画面は内部的にWebView（Chromiumベースのブラウザ）で動作しており、悪意あるスクリプトの実行や外部コンテンツの読み込みを防ぐためのセキュリティ制限が設定されています。

プレビュー画面の右上にある「鍵アイコン（または盾アイコン）」をクリックするか、コマンドパレットから Markdown: Change Preview Security Settings を選択すると、以下の4段階からセキュリティレベルを変更できます。

• Strict（厳格・推奨）： HTTPS経由の安全なコンテンツのみ読み込み、スクリプト実行を遮断します。
• Allow insecure content（安全でないコンテンツを許可）： HTTP経由の画像やリソースの読み込みを許可します。
• Disable： すべての制限を解除し、インラインスクリプト等の実行を許可します（信頼できるファイルのみで使用）。
• Disable scripts： スクリプト実行のみを無効化します。

4. プレビューの見た目（CSS）をカスタマイズする

「標準のプレビューデザインだと文字が小さすぎる」「GitHubや自分のブログと同じ見た目のCSSでプレビューしたい」という場合は、外部CSSファイルを指定してデザインを適用できます。

{
  // プレビューのフォントサイズを変更
  "markdown.preview.fontSize": 16,

  // プレビューの行間（ラインハイト）を変更
  "markdown.preview.lineHeight": 1.7,

  // 外部CSSファイルをプレビューに適用
  "markdown.styles": [
    "https://cdn.jsdelivr.net/npm/github-markdown-css@5/github-markdown.min.css",
    "./custom-markdown.css"
  ]
}

VS CodeのMarkdown執筆を劇的に進化させる！おすすめ拡張機能3選

VS Codeの標準プレビューだけでも十分強力ですが、専用の拡張機能（Extensions）をインストールすることで、執筆効率と表現力が数倍に跳ね上がります。ここでは、世界中のライターやエンジニアから圧倒的な支持を集める神プラグイン3選を厳選してご紹介します。

① Markdown All in One（執筆支援・目次自動生成・キーバインド）

• 目次（TOC）のワンクリック自動生成： コマンドパレットで Markdown All in One: Create Table of Contents を実行するだけで、見出し構造（h2, h3, h4）を解析してリンク付き目次を瞬時に挿入。見出しを修正・追加した際も、ファイル保存時に目次が自動更新されます。
• ショートカットによる書式設定： 文字列を選択して Ctrl + B（Mac: Cmd + B）で **太字**、Ctrl + I（Mac: Cmd + I）で *斜体*、Alt + S で ~~打ち消し線~~ に瞬時変換。
• スマートリスト処理： リスト記号（- や 1. ）を入力して改行すると、次の行に自動でリスト記号が補完され、不要な時は再度Enterを押すだけで解除されます。
• 数式サポート： $E = mc^2$ などのTeX/LaTeX数式を標準プレビュー上で美しくレンダリングします。

② Markdown Preview Enhanced（MPE：超高機能プレビュー＆作図・数式）

• Mermaidダイアグラムの完全レンダリング： ```mermaid で記述したフローチャートやシーケンス図、ガントチャート、ER図をプレビュー画面上にグラフィカルに即時描画します。
• 多彩なエクスポート機能： プレビュー画面を右クリックするだけで、HTML、PDF（Chrome経由）、PNG、JPEG、さらにはMarkdown電子書籍（ePub/Mobi）形式での出力が可能です。
• MPEの起動ショートカット： エディタを開いた状態で Ctrl + Shift + V（または右上のMPE専用アイコン）をクリックすると、専用の高機能プレビューウィンドウが立ち上がります。

③ Markdown PDF（ワンクリックPDF変換・配布用ドキュメント作成）

• 右クリック一発変換： エディタ上で右クリックし、Markdown PDF: Export (pdf) を選択するだけで、同一フォルダ内に美しいレイアウトのPDFが瞬時に生成されます。
• ヘッダー・フッター・ページ番号の自動挿入： ページ下部への「ページ番号 / 総ページ数」や日付、ドキュメントタイトルの印字を柔軟にカスタマイズ可能。
• 日本語フォント設定のポイント： PDF出力時に日本語が文字化けしたり明朝体になる場合は、VS Codeの settings.json に "markdown-pdf.styles": ["https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap"] やローカルフォント（Meiryo, Yu Gothic）を指定すると、見栄えの良いゴシック体で書き出せます。

【機能比較表】標準プレビューとおすすめ拡張機能の違い

VS Code標準機能および3大おすすめプラグインの対応機能と特徴を一覧表で比較しました。作業目的に応じて組み合わせて導入するのがおすすめです。

【動かない・出ない】VS Code マークダウンプレビューのトラブルシューティング

VS Codeでマークダウンを編集していて「プレビュー画面が真っ白になる（vscode プレビュー 出ない）」「ショートカットを押しても反応しない」「編集内容がリアルタイムに更新されない」「画像やMermaid図が表示されない」といったトラブルに遭遇した際の具体的な解決手順を原因別に解説します。

1. プレビューが真っ白（White Screen）になる・読み込み中から進まない

プレビュータブを開いても画面が真っ白なままフリーズしたり、「Loading preview…」のまま動かなくなるトラブルは、VS Code内部のWebViewプロセスのクラッシュやキャッシュの不整合が主な原因です。

2. ショートカットキーを押してもプレビューが開かない

Ctrl + K, V や Ctrl + Shift + V を押しても何も起きない、または関係ないコマンドが実行されてしまう場合は、以下の3点を確認してください。

• 確認①：ファイルの言語モードが「Markdown」になっているか
  新規作成したファイル（未保存の Untitled-1 など）は、VS Code右下のステータスバーに「Plain Text（プレーンテキスト）」と表示されている場合があります。ここをクリックして 「Markdown」 を選択するか、拡張子を .md で保存するとショートカットが有効になります。
• 確認②：キー入力が2ストローク（2段階）になっているか
  Ctrl + K, V は同時押しではありません。Ctrl + K を押して指を離した後、1秒以内に V を押す必要があります。VS Code下部のステータスバーに「(Ctrl+K) was pressed. Waiting for second key of chord…」と出ている状態で V を入力してください。
• 確認③：キーバインドの競合（他拡張機能や日本語入力）
  Ctrl + K, Ctrl + S で「キーボード ショートカット」を開き、検索バーに markdown.showPreviewToSide と入力して、競合するコマンドがないか確認・再割り当てを行ってください。

3. 編集してもプレビューがリアルタイムに更新されない

「左側のエディタで文章を入力しても、右側のプレビューが自動更新されず、手動で保存しないと反映されない」という場合は、拡張機能の設定やファイルサイズが影響しています。

• ファイルサイズが極端に巨大な場合： 数万行を超えるMarkdownファイルでは、パフォーマンス保護のためリアルタイム更新の頻度が抑制されることがあります。
• 自動保存（Auto Save）の設定： プレビュー更新が保存トリガーになっている拡張機能を使用している場合は、VS Codeのメニュー「ファイル」➔「自動保存（Auto Save）」にチェックを入れておくと快適に執筆できます。

4. ローカル画像が表示されない・リンク切れになる

Markdown内に ![画像名](./images/sample.png) と記載してもプレビュー上で画像が表示されない場合は、以下の原因が考えられます。

• 相対パスの指定ミス： 画像ファイル名の大文字・小文字の違いや、パスの区切り文字（Windowsでもスラッシュ / を使用する）を確認してください。
• セキュリティ制限（CSP）によるブロック： プレビュー画面のセキュリティ設定が「Strict」になっている場合、ワークスペース外にある画像ファイルへのアクセスが制限されます。セキュリティ設定を「Allow insecure local content（安全でないローカルコンテンツを許可）」に変更してください。

5. Mermaid図や数式がコードブロックのまま表示される

```mermaid や $$ 数式 $$ と書いたのに、プレビューで綺麗な図や数式にならず、コードがそのまま表示されるのは「VS Code標準プレビューの仕様」です。

VS Codeの標準Markdownプレビューは、軽量性を重視して標準的なCommonMark記法のみをサポートしています。Mermaid作図や数式をプレビューでグラフィカルに表示させたい場合は、前述の「Markdown Preview Enhanced」または公式の「Markdown Preview Mermaid Support」拡張機能をインストールしてください。

VS Code マークダウンプレビューに関するよくある質問（FAQ）

まとめ：VS Codeプレビューをマスターして快適なマークダウン環境を作ろう

VS Code（Visual Studio Code）は、標準のプレビュー機能だけでも非常に高機能で軽快ですが、ショートカットキーの習得や設定の最適化、拡張機能の追加によって、世界最高峰の快適なMarkdown執筆環境へと進化します。

ぜひ本記事を参考に、VS Codeのマークダウンプレビュー機能をフル活用して、日々のドキュメント作成やブログ執筆をより快適・高速に進めてみてください！