はじめに
Markdown でドキュメントを書いていると、「実際にどう表示されるか確認したい」と思うことがありませんか？
VSCode には Markdown プレビュー機能が標準搭載されており、拡張機能なしですぐに使えます。
この記事では、基本のプレビュー方法から便利な設定まで紹介します。
対象者
- Markdown を書き始めたばかりの人
- VSCode で README.md やドキュメントを編集している人
- プレビューしながら効率よく Markdown を書きたい人
環境
- VSCode（バージョン 1.80 以降推奨）
- OS は問いません（Windows / macOS / Linux）
全体の流れ
方法1: ショートカットキーでプレビュー表示
サイドバイサイド表示（おすすめ）
Markdown ファイルを開いた状態で以下のショートカットを押します。
| OS | ショートカット |
|---|---|
| Windows / Linux |
Ctrl + K → V
|
| macOS |
Cmd + K → V
|
エディタの右側にプレビューが表示され、編集しながらリアルタイムで確認できます。
プレビューのみ表示
| OS | ショートカット |
|---|---|
| Windows / Linux | Ctrl + Shift + V |
| macOS | Cmd + Shift + V |
現在のタブがプレビュー画面に切り替わります。
方法2: コマンドパレットから表示
-
Ctrl + Shift + P（macOS:Cmd + Shift + P）でコマンドパレットを開く - 以下のいずれかを入力して実行：
| コマンド | 動作 |
|---|---|
Markdown: Open Preview |
プレビューのみ表示 |
Markdown: Open Preview to the Side |
サイドバイサイド表示 |
方法3: エディタ右上のアイコンから表示
Markdown ファイルを開くと、エディタ右上にプレビューアイコン（本を開いたような虫眼鏡マーク）が表示されます。
このアイコンをクリックするだけでサイドバイサイドプレビューが開きます。
便利な設定
settings.json に以下を追加すると、プレビューの動作をカスタマイズできます。
{
// プレビューのフォントサイズを変更
"markdown.preview.fontSize": 16,
// プレビューの行の高さを変更
"markdown.preview.lineHeight": 1.8,
// エディタのスクロールとプレビューを同期
"markdown.preview.scrollEditorWithPreview": true,
"markdown.preview.scrollPreviewWithEditor": true,
// プレビューで改行を <br> として反映
"markdown.preview.breaks": true
}
おすすめ拡張機能（任意）
注意: 以下の拡張機能はなくてもプレビューは使えます。
方法1〜3 はすべて VSCode の標準機能なので、追加インストールは不要です。
より高機能なプレビューや編集補助が欲しい場合にのみ導入してください。
| 拡張機能 | 機能 |
|---|---|
| Markdown All in One | ショートカット・目次自動生成・リスト補完など |
| Markdown Preview Mermaid Support | プレビューで Mermaid 図を表示 |
| Markdown Preview Enhanced | 高機能プレビュー（PDF エクスポート等） |
| markdownlint | Markdown の書き方チェック（リンター） |
拡張機能のインストール方法：
-
Ctrl + Shift + X（macOS:Cmd + Shift + X）で拡張機能パネルを開く - 拡張機能名を検索してインストール
まとめ
| やりたいこと | 方法 |
|---|---|
| サイドバイサイドでプレビュー |
Ctrl + K → V
|
| プレビューのみ表示 | Ctrl + Shift + V |
| コマンドパレットから開く |
Ctrl + Shift + P → Markdown: Open Preview
|
| アイコンから開く | エディタ右上のプレビューアイコンをクリック |
VSCode の Markdown プレビューは標準搭載なので、すぐに使い始められます。
サイドバイサイド表示で編集しながらリアルタイム確認するのが最も効率的です。