「README.md を書きたいけど、見た目がどうなるか分からない…」 「ブログ記事をMarkdownで書いてるけど、いちいちプレビューサイトで確認するのが面倒」 「Markdownの記法、覚えきれない！」
こんな悩み、Markdownを使い始めた人なら誰もが経験します。
実は、VSCode（Visual Studio Code）を使えば、Markdownを書きながらリアルタイムでプレビューが見られるんです。しかも、便利な拡張機能を追加すれば、まるでWordのような快適な執筆環境が作れます。
この記事では、VSCodeでMarkdownプレビューを使う基本から、画面分割での同時表示、便利な拡張機能、さらにはプレビューのカスタマイズまで、すべて分かりやすく解説していきます！
Markdownプレビューの基本：3つの表示方法をマスター
方法1：サイドバイサイド表示（最も人気！）
横に並べて表示する方法：
- Markdownファイル（.md）を開く
- Ctrl + K → V（Mac: Cmd + K → V）を押す
- エディタとプレビューが左右に並んで表示される
メリット：
- 書きながらリアルタイムで確認できる
- スクロール同期で対応箇所が分かりやすい
- 最も効率的な執筆スタイル
方法2：タブ切り替え表示
別タブでプレビューを開く：
- Markdownファイルを開く
- Ctrl + Shift + V（Mac: Cmd + Shift + V）を押す
- 新しいタブでプレビューが開く
メリット：
- 画面を広く使える
- プレビューだけをじっくり確認したい時に便利
方法3：プレビューボタンから開く
マウス操作で開く：
- Markdownファイルを開く
- 右上のプレビューアイコン（本に虫眼鏡のマーク）をクリック
- 「プレビューを横に表示」または「プレビュー」を選択
スクロール同期：書いている場所とプレビューを連動
自動スクロール同期の仕組み
VSCodeは標準でスクロール同期機能があります。
動作：
- エディタをスクロール → プレビューも追従
- プレビューをスクロール → エディタも追従
- 編集中の箇所が常にプレビューで確認可能
スクロール同期の設定
同期をオン/オフ：
- 設定を開く（Ctrl + ,）
- 「markdown.preview.scrollSync」で検索
- 以下から選択：
true：双方向同期（デフォルト）false：同期なし
編集箇所への自動ジャンプ：
"markdown.preview.scrollEditorWithPreview": true,
"markdown.preview.scrollPreviewWithEditor": true
便利なショートカット：作業効率を爆上げする技
必須ショートカット一覧
基本操作：
- Ctrl + Shift + V：プレビューを開く/切り替え
- Ctrl + K → V：サイドバイサイド表示
- Ctrl + B：太字（選択テキストを太字に）
- Ctrl + I：斜体（選択テキストを斜体に）
Markdown記法の入力支援
リスト作成：
- 「- 」や「1. 」の後でEnter → 自動で次の項目
- Tab → インデントを深くする
- Shift + Tab → インデントを浅くする
表の作成：
| と入力してTab → 表のテンプレート自動生成
リンクの挿入： 選択したテキストで Ctrl + K → リンク記法に変換
プレビューのカスタマイズ：見た目を自分好みに
CSSでプレビューをカスタマイズ
独自のスタイルを適用：
- 設定ファイルにCSSファイルのパスを追加
"markdown.styles": [ "file:///C:/Users/username/markdown.css" ] - CSSファイルを作成
/* markdown.css */ body { font-family: "游ゴシック", "Yu Gothic", sans-serif; line-height: 1.8; max-width: 800px; margin: 0 auto; padding: 20px; } h1 { color: #2c3e50; border-bottom: 3px solid #3498db; padding-bottom: 10px; } code { background-color: #f4f4f4; padding: 2px 5px; border-radius: 3px; } blockquote { border-left: 4px solid #3498db; padding-left: 15px; color: #666; }
テーマの変更
プレビューのテーマ設定：
"markdown.preview.theme": "dark" // または "light"
VSCodeのテーマに合わせて自動で変更されます。
最強の拡張機能：これだけは入れておきたい！
1. Markdown All in One（必須！）
できること：
- 目次（TOC）の自動生成
- 数式のプレビュー（LaTeX対応）
- リストの自動補完強化
- ショートカットの追加
便利機能：
- Ctrl + Shift + P → 「Create Table of Contents」で目次生成
- 「**」と入力で太字の自動補完
- リンクのオートコンプリート
2. Markdown Preview Enhanced（高機能プレビュー）
特徴：
- PlantUMLなどの図表対応
- PDFやHTMLへのエクスポート
- プレゼンテーションモード
- カスタムCSSテーマ多数
設定方法：
- 拡張機能をインストール
- Ctrl + K → V の代わりに Ctrl + K → Ctrl + V でプレビュー
- 右クリックメニューから各種エクスポート
3. Markdownlint（文法チェック）
機能：
- Markdown記法の間違いを指摘
- 統一されたスタイルを維持
- 自動修正機能
よくある指摘：
- 見出しレベルの飛び（h1→h3など）
- リストのインデント不統一
- 行末の空白
4. Paste Image（画像貼り付け）
超便利機能：
- クリップボードの画像をCtrl + Alt + Vで貼り付け
- 自動でファイル保存とリンク生成
- スクリーンショットを即座に挿入
設定例：
"pasteImage.path": "${currentFileDir}/images",
"pasteImage.prefix": "./",
"pasteImage.namePattern": "${currentFileNameWithoutExt}_${datetime}"
5. Markdown PDF（PDF変換）
できること：
- MarkdownをPDFに変換
- ヘッダー・フッターの設定
- 目次の自動生成
- CSSでスタイル調整
実践的な執筆環境の作り方
ブログ執筆に最適な設定
おすすめレイアウト：
- 画面を2分割（エディタ：プレビュー = 6:4）
- サイドバーは非表示（Ctrl + B）
- ミニマップも非表示
- Zenモード（Ctrl + K → Z）で集中
設定ファイル：
{
"editor.wordWrap": "on",
"editor.lineNumbers": "off",
"editor.minimap.enabled": false,
"markdown.preview.fontSize": 16,
"editor.fontSize": 14,
"editor.lineHeight": 1.8
}
技術ドキュメント作成の設定
重要な設定：
{
"markdown.preview.breaks": false, // 改行を厳密に
"markdownlint.config": {
"MD013": false, // 行の長さ制限を無効
"MD033": false // HTMLタグを許可
}
}
README.md作成のコツ
GitHubプレビューに近づける：
"markdown.preview.fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif"
トラブルシューティング：よくある問題を解決
プレビューが表示されない
原因と対策：
- 拡張子が.mdになっていない → ファイル名を確認
- プレビュー機能が無効化されている → 設定で「markdown.preview.enabled」を確認
- セキュリティ設定でブロック → 信頼できるファイルとして開く
画像が表示されない
チェックポイント：
- 相対パスが正しいか確認
- ファイル名に日本語が含まれていないか
- 画像ファイルが実際に存在するか
正しい記法：
数式が表示されない
解決方法：
- Markdown All in One拡張機能をインストール
- 設定で数式レンダリングを有効化：
"markdown.math.enabled": true
文字化けする
対処法：
- ファイルのエンコーディングをUTF-8に変更
- 右下のエンコーディング表示をクリック → UTF-8を選択
プロのテクニック：さらに効率を上げる裏技
スニペットで定型文を爆速入力
独自スニペットの作成：
- ファイル → ユーザー設定 → ユーザースニペット
- markdown.json を選択
- スニペットを追加：
{
"Front Matter": {
"prefix": "fm",
"body": [
"---",
"title: $1",
"date: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE",
"tags: [$2]",
"---",
"",
"$0"
]
},
"Code Block": {
"prefix": "code",
"body": [
"```${1:javascript}",
"$2",
"```",
"$0"
]
}
}
目次の自動更新
Markdown All in Oneで：
- 目次を生成
- ファイル保存時に自動更新される
- 番号付けも自動調整
マルチカーソルで一括編集
複数箇所を同時編集：
- Alt + クリック：カーソルを追加
- Ctrl + Alt + ↑/↓：上下にカーソル追加
- リストの先頭に一括で記号追加などに便利
おすすめワークフロー：用途別ベスト設定
個人ブログ執筆
構成：
- Markdown All in One + Markdown Preview Enhanced
- サイドバイサイド表示
- Paste Imageで画像管理
- 最後にMarkdown PDFでバックアップ
技術記事・Qiita投稿
構成：
- Markdownlintで文法チェック
- コードブロックのシンタックスハイライト確認
- 目次自動生成
- プレビューで最終確認
GitHub README作成
構成：
- GitHubフレーバーに合わせた設定
- バッジやシールドの挿入
- 相対パスでの画像リンク
- Actionsとの連携確認
まとめ：今すぐ始められる最強のMarkdown環境
VSCodeでMarkdownプレビューを使いこなすポイント：
基本設定：
- Ctrl + K → V でサイドバイサイド表示
- スクロール同期で快適な執筆
- ショートカットを覚えて高速化
必須拡張機能：
- Markdown All in One：オールインワン機能
- Markdownlint：文法チェック
- Paste Image：画像の簡単挿入
カスタマイズ：
- CSSで見た目を調整
- スニペットで定型文を登録
- 用途に合わせた設定
今すぐやるべきこと：
- VSCodeでMarkdownファイルを開く
- Ctrl + K → V でプレビュー表示
- Markdown All in Oneをインストール
これだけで、あなたのMarkdown執筆環境は劇的に改善されます！
最初は基本機能だけでも十分便利です。慣れてきたら、拡張機能やカスタマイズを追加して、自分だけの最強執筆環境を作り上げてください。
快適なMarkdownライフを楽しんでくださいね！
コメント