VS CodeでMarkdownをプレビュー

まず答え

VS Codeで .md ファイルを開き、Cmd+Shift+V（Windows・Linuxは Ctrl+Shift+V）を押すとMarkdownプレビューが開きます。編集画面の横に並べたい場合は、Cmd+K のあとに V（Windows・Linuxは Ctrl+K V）を押します。

プレビューを開く       Cmd+Shift+V / Ctrl+Shift+V
横にプレビューを開く   Cmd+K V     / Ctrl+K V

タブでプレビューする

Markdownファイルを開いた状態でショートカットを押すと、レンダリングされた結果が新しいタブで表示されます。見出し、リスト、表、リンク、コードブロックがどのように表示されるかを確認できます。

ショートカットを忘れた場合は、コマンドパレットを開いて Markdown: Open Preview を実行します。

Cmd+Shift+P / Ctrl+Shift+P
Markdown: Open Preview

横並びでプレビューする

書きながら確認したいときは、横並びプレビューが便利です。

Cmd+K → V
Ctrl+K → V

左にMarkdown本文、右にプレビューを置けます。編集に合わせてプレビューも更新されるので、表やリンクの崩れをすぐ確認できます。

コマンドパレットからは Markdown: Open Preview to the Side を選びます。

拡張機能は必要？

基本的なプレビューだけなら拡張機能は不要です。VS CodeにはMarkdownプレビュー機能が最初から入っています。

ただし、次のようなことをしたい場合は拡張機能が役立ちます。

PDFとして書き出したい。
Mermaidなどの図を表示したい。
目次やチェックリストを強化したい。
Markdownの入力補助がほしい。

その場合は、用途に合う拡張機能を追加します。まずは標準プレビューで十分か確認してからで構いません。

プレビューされないときの確認点

症状	最初に確認すること	次の操作
プレビューのコマンドが出ない	ファイルが `.md` で、言語モードがMarkdownになっているか	コマンドパレットで `Markdown: Open Preview` を検索する
別のファイルが表示される	プレビューがロックされていないか	プレビューを選択し `Markdown: Toggle Preview Locking` を実行する
表が文字のまま表示される	ヘッダーの下に区切り行があるか	表の書き方で最小の例と比較する
Enterを押しても行が分かれない	同じ段落内の通常改行になっていないか	改行の使い分けを確認する
画像が表示されない	相対パスと画像ファイルの位置が合っているか	画像の書き方を確認する

表やコードブロックが崩れて見える場合、プレビュー機能の問題ではなく、Markdownの書き方が崩れていることが多いです。

外部画像やスクリプトがブロックされている場合は、プレビューのセキュリティ設定も確認してください。知らない文書を表示するために保護を解除する必要はありません。まず信頼できるローカル画像と基本記法で試します。

小さなファイルで表示を確認する

次の内容を新しい .md ファイルに保存して、プレビューを開きます。見出し、リスト、表が表示されれば、基本プレビューは動いています。

# プレビュー確認

- 確認する項目

| 項目 | 状態 |
|---|---|
| 表示 | 確認中 |

この例は表示されるのに元の文書が崩れる場合は、閉じていないコードブロックや表の区切りを順に確認してください。

GitHubでの見え方と完全に同じ？

VS CodeのMarkdownプレビューはGitHub風の表示に近いですが、GitHub、Notion、Slack、社内Wikiなど、環境ごとに細かな差があります。

特に差が出やすいもの:

取り消し線
タスクリスト
表
Mermaidなどの図
HTMLタグ

公開先が決まっている場合は、最後にその環境でも確認してください。

AIに渡すときの注意

AIにとって大事なのはプレビュー画面ではなく、元の .md テキストです。見た目がきれいでも、本文のMarkdownが崩れていると、AIは構造を読み間違えます。

AIに渡す前に確認したいポイント:

見出しが # / ## で残っている。
表がMarkdownの表として書かれている。
コードがコードブロックに入っている。
リンクテキストが「こちら」だけになっていない。
PDFからコピーした余計な改行やページ番号が混ざっていない。

プレビューは人間が確認するための道具です。AIに渡す正本は、読みやすく整理されたMarkdown本文だと考えてください。

次に読む

Markdownとは？ — Markdownの基本。
Markdownの表 — プレビューで崩れやすい表の書き方。
MarkdownをPDFに変換する — VS CodeからPDF化したい場合。
Markdownエディター比較 — ファイル、フォルダー、知識管理に合うツールを選ぶ。

公式資料

VS CodeのMarkdownプレビューとセキュリティ。