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 になっているか。
• VS CodeがMarkdownとして認識しているか。
• 表の2行目に |---|---| の区切り行があるか。
• コードブロックの開始と終了の ``` がそろっているか。
• HTMLを含むMarkdownで、環境によって無効化されていないか。

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

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化したい場合。