# VS CodeでMarkdownをプレビュー

> VS CodeでMarkdownプレビューを開く方法。ショートカット、横並び表示、コマンドパレット、プレビューされないときの確認点、AI向けの注意を解説します。

## まず答え

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

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

## タブでプレビューする

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

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

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

## 横並びでプレビューする

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

```text
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とは？](/ja/what-is-markdown/) — Markdownの基本。
- [Markdownの表](/ja/tables/) — プレビューで崩れやすい表の書き方。
- [MarkdownをPDFに変換する](/ja/md-to-pdf/) — VS CodeからPDF化したい場合。