「Markdownファイル（.md）を書いているけど、見た目がどうなるかイマイチ分からない」
「VS Codeでプレビューしながら文章を整えたい」
そんなときに便利なのがMarkdownプレビュー機能です。
VS Codeは標準で強力なMarkdownプレビュー機能がついており、リアルタイムで見た目を確認しながら編集できます。ブログ記事や技術ドキュメント、メモなどを書く際の作業効率が格段に向上します。
この記事では、VS CodeでMarkdownをプレビューする基本的な方法から、もっと便利に使うおすすめ設定・拡張機能まで、初心者にもわかりやすく解説します。
VS Codeの標準機能でMarkdownをプレビュー
プレビューの開き方
Markdownファイル（.md）を開いている状態で、以下のいずれかの方法でプレビューを開けます。
ショートカットキーを使う方法
Ctrl + K → V（WindowsとLinux）
Cmd + K → V（Mac）
を順番に押すと、画面右側にプレビューが表示されます。
アイコンをクリックする方法
エディタ右上の小さな「?」のようなアイコン（「Open Preview to the Side」）をクリックするだけでもOKです。
同期スクロール機能
VS Codeではエディタ側とプレビュー側が連動してスクロールします。長い文章を書いているときでも、編集している部分とプレビューが自動で合わせて表示されるので、とても便利です。
文章を編集するとプレビューが自動で更新されるため、完成イメージを確認しながら書き進められます。
プレビューが表示されない場合の対処法
もしプレビューが表示されない場合は、以下を確認してください：
- ファイルの拡張子が
.mdになっているか - VS Codeが最新版に更新されているか
- 他の拡張機能が競合していないか
Markdownプレビューをもっと快適にするおすすめ拡張機能
Markdown All in One
VS CodeのMarkdown執筆で定番の拡張機能です。
主な機能
- テーブルやリストを自動整形：見た目がきれいに揃います
- 見出しジャンプ：長い文章でも素早く移動できます
- ショートカット：
Ctrl + Bで太字、Ctrl + Iで斜体 - タスクチェックボックス：
- [ ]の操作も簡単
インストール方法
- VS Codeの拡張機能タブ（Ctrl + Shift + X）を開く
- 検索欄に「Markdown All in One」と入力
- 「インストール」をクリック
Markdown Preview Enhanced
もっと高機能なプレビューを使いたい人向けの拡張機能です。
特徴
- 数式表示：KaTeX / MathJax で数式をきれいに表示
- グラフ描画：PlantUML、Mermaid、Chart.js の図をその場で描画
- エクスポート機能：PDFやHTMLへのエクスポートも簡単
- カスタムCSS：プレビューの見た目を自由に変更可能
複雑な技術ドキュメントや仕様書を書くなら非常におすすめです。
より便利に使うための設定
Markdownのプレビューを自動で開く設定
いつもファイルを開くたびにプレビューを開くのが面倒な場合は、設定を変更しましょう。
Ctrl + ,（設定を開く）- 検索欄に「markdown preview」と入力
- 「Markdown › Preview: Open Editors」を「beside」に変更
または、settings.json に以下を追加します：
{
"markdown.preview.openEditors": "beside"
}
これでMarkdownを開いたら自動で横にプレビューが表示されます。
プレビューのスタイルをカスタマイズ
プレビューの見た目を変更したい場合は、カスタムCSSを設定できます。
- 設定で「markdown preview styles」を検索
- 「Markdown › Preview: Styles」にCSSファイルのパスを追加
よく使うショートカットキー
効率的にMarkdownを書くために、以下のショートカットを覚えておくと便利です：
Ctrl + K → V：プレビューを開くCtrl + B：太字（bold）Ctrl + I：斜体（italic）Ctrl + Shift + ]：見出しレベルを上げるCtrl + Shift + [：見出しレベルを下げる
実際の使用例
ブログ記事の執筆
ブログ記事を書く際は、以下のような流れで使用します：
- 見出し構造を先に決める
- プレビューを見ながら文章を書く
- 画像や表を追加してレイアウトを確認
- 最終的な見た目をチェック
技術ドキュメントの作成
技術ドキュメントでは、コードブロックや表を多用するため、プレビューで確認しながら作成すると効率的です。
トラブルシューティング
よくある問題と解決方法
プレビューが更新されない
- ファイルを保存してみる（Ctrl + S）
- VS Codeを再起動してみる
- 拡張機能を無効化/有効化してみる
日本語フォントが表示されない
- システムの日本語フォントを確認
- カスタムCSSでフォントを指定
プレビューが遅い
- 大きなファイルの場合は分割を検討
- 不要な拡張機能を無効化
まとめ
VS Codeなら、以下のようにMarkdown作成が格段に効率的になります：
- 標準のプレビュー機能ですぐMarkdownの見た目を確認
- Markdown All in Oneで書く作業も快適に
- Markdown Preview Enhancedで数式や図までプレビュー
コメント