VS CodeでMarkdownをプレビューするショートカット｜一瞬で表示する便利な使い方

プログラミング・IT

Markdown（マークダウン）はREADMEやドキュメント、ブログ記事を書くときにとても便利な書式です。でも、書いている途中で以下のような不安を感じることはありませんか？

「見出しや箇条書きがちゃんと表示されるか確認したい」 「表の書式が正しく表示されているか見たい」 「リンクが正しく動作するか確認したい」 「画像がちゃんと表示されているか知りたい」

そんなとき、Visual Studio Code（VS Code）なら簡単にMarkdownをプレビューできます。しかもショートカットキーを使えば、一瞬でプレビュー画面を開くことができます。

この記事では、VS CodeでMarkdownをプレビューする基本のショートカットから、さらに効率的な使い方、カスタマイズ方法まで、初心者向けにわかりやすく詳しく解説します。

スポンサーリンク

VS Code標準のMarkdownプレビュー機能

VS Codeの標準機能

VS CodeにはMarkdownプレビュー機能が最初から組み込まれています。追加の拡張機能をインストールしなくても、すぐにMarkdownファイルのプレビューを表示できます。

対応ファイル形式

以下の拡張子のファイルでプレビュー機能が使用できます：

  • .md（最も一般的）
  • .markdown
  • .mdown
  • .mkd
  • .mkdn

基本のプレビューショートカット

プレビューをタブで開く

新しいタブでプレビューを表示するショートカットです。

Windows・Linux

Ctrl + Shift + V

macOS

Cmd + Shift + V

動作の詳細

  • 現在編集中のMarkdownファイルの内容が新しいタブで表示される
  • プレビュータブは読み取り専用
  • 元のMarkdownファイルを編集すると、プレビューも自動更新される

サイド・バイ・サイドプレビュー（推奨）

編集画面とプレビューを左右に並べて表示する、最も実用的なショートカットです。

Windows・Linux

Ctrl + K → V

（Ctrlを押しながらKを押し、その後Vを押す2段階操作）

macOS

Cmd + K → V

この方法のメリット

  • リアルタイム確認：編集内容が即座にプレビューに反映
  • 効率的な作業：画面を切り替える必要がない
  • レスポンシブ確認：表の幅や画像サイズを調整しながら確認可能

コマンドパレットからの実行

ショートカットを忘れた場合は、コマンドパレットからも実行できます：

Ctrl + Shift + P（Windows・Linux）
Cmd + Shift + P（macOS）

その後、以下のコマンドを入力：

  • Markdown: Open Preview（新しいタブでプレビュー）
  • Markdown: Open Preview to the Side（サイド・バイ・サイド）

プレビューの詳細機能

自動スクロール同期

VS CodeのMarkdownプレビューには、編集画面とプレビューの位置を同期する機能があります。

同期の動作

  • 編集画面でスクロール → プレビューも連動してスクロール
  • プレビューでスクロール → 編集画面も連動してスクロール
  • 編集位置の変更 → プレビューの対応部分が表示される

同期の無効化

もし同期が邪魔に感じる場合は、設定で無効にできます：

{
  "markdown.preview.scrollPreviewWithEditor": false,
  "markdown.preview.scrollEditorWithPreview": false
}

プレビューの更新タイミング

リアルタイム更新（デフォルト）

VS Codeでは、ファイルを保存しなくても編集内容がリアルタイムでプレビューに反映されます。

更新頻度の調整

更新頻度を調整したい場合は以下の設定が使用できます：

{
  "markdown.preview.refreshInterval": 1000
}

（1000ミリ秒 = 1秒間隔で更新）

より便利にするカスタマイズ設定

自動プレビュー設定

ファイルを開いたときに自動でプレビューを表示

{
  "markdown.preview.openMarkdownLinks": "inPreview",
  "workbench.editorAssociations": {
    "*.md": "vscode.markdown.preview.editor"
  }
}

新しいMarkdownファイル作成時の自動プレビュー

{
  "markdown.preview.doubleClickToSwitchToEditor": false
}

カスタムCSS の適用

プレビューのスタイル変更

独自のCSSファイルを作成してプレビューの見た目をカスタマイズできます：

{
  "markdown.styles": [
    "https://cdn.jsdelivr.net/npm/github-markdown-css@5/github-markdown.css",
    "file:///C:/path/to/your/custom.css"
  ]
}

カスタムCSS例

/* custom-markdown.css */
.vscode-body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.vscode-body h1 {
  color: #2c3e50;
  border-bottom: 2px solid #3498db;
  padding-bottom: 10px;
}

.vscode-body code {
  background-color: #f8f9fa;
  padding: 2px 4px;
  border-radius: 3px;
  font-family: 'Consolas', 'Monaco', monospace;
}

セキュリティ設定

セキュリティレベルの調整

Markdownプレビューのセキュリティレベルを調整できます：

{
  "markdown.preview.markdownItPlugins": true,
  "markdown.preview.typographer": true
}

外部リンクの取り扱い

{
  "markdown.preview.openMarkdownLinks": "inEditor",
  "markdown.links.openLocation": "currentGroup"
}

実践的な使い方とワークフロー

ドキュメント作成ワークフロー

ステップ1：ファイル作成とプレビュー表示

  1. 新しいMarkdownファイルを作成（Ctrl + N）
  2. ファイルを.mdで保存（Ctrl + S）
  3. サイド・バイ・サイドプレビューを開く（Ctrl + K → V）

ステップ2：構造の作成

# プロジェクト名

## 概要
プロジェクトの簡単な説明

## インストール方法
```bash
npm install package-name

ライセンス


#### ステップ3：リアルタイムでの確認と調整

- 見出しレベルの調整
- 表の列幅やレイアウトの確認
- コードブロックのシンタックスハイライト確認
- リンクの動作確認

### ブログ記事執筆での活用

#### 記事構造の可視化

```markdown
# タイトル

## はじめに
- 問題提起
- 記事の目的

## 本文
### セクション1
内容

### セクション2
内容

## まとめ
- 要点整理
- 次のアクション

画像とメディアの確認

![説明文](./images/screenshot.png)

<img src="./images/diagram.png" alt="図解" width="500">

[リンクテキスト](https://example.com)

トラブルシューティング

よくある問題と解決方法

プレビューが表示されない

症状：ショートカットを押してもプレビューが開かない

解決方法：

  1. ファイルの拡張子が.mdになっているか確認
  2. VS Codeを再起動
  3. コマンドパレットから手動で実行してみる

プレビューの表示が崩れる

症状：Markdownの表示が期待と異なる

解決方法：

  1. HTMLタグの確認：不正なHTMLタグがないかチェック
  2. マークダウン構文の確認：スペースやインデントが正しいかチェック
  3. 文字エンコーディング：ファイルがUTF-8で保存されているか確認

数式が表示されない

症状：LaTeX記法の数式が表示されない

解決方法：

{
  "markdown.math.enabled": true
}

絵文字が表示されない

症状：:smile:などの絵文字記法が文字のまま表示される

解決方法：

{
  "markdown.preview.fontFamily": "system-ui, -apple-system, sans-serif"
}

拡張機能との競合

他のMarkdown拡張機能がある場合

複数のMarkdown拡張機能がインストールされていると、競合することがあります：

  1. 拡張機能の確認：Ctrl + Shift + Xで拡張機能一覧を確認
  2. 優先度の調整：設定で使用する拡張機能を指定
  3. 一時的な無効化：問題のある拡張機能を一時的に無効化

おすすめの拡張機能

Markdown Preview Enhanced

より高機能なプレビューが必要な場合：

拡張機能ID: shd101wyy.markdown-preview-enhanced

追加機能：

  • 数式のサポート（KaTeX、MathJax）
  • 図表の生成（Mermaid、PlantUML）
  • プレゼンテーションモード
  • PDFエクスポート

Markdown All in One

Markdown編集を総合的にサポート：

拡張機能ID: yzhang.markdown-all-in-one

主要機能：

  • 自動目次生成
  • テーブルフォーマッター
  • キーボードショートカットの拡張
  • 数式のサポート

markdownlint

Markdown記法のチェック：

拡張機能ID: DavidAnson.vscode-markdownlint

機能：

  • 構文エラーの検出
  • スタイルガイドのチェック
  • 自動修正の提案

パフォーマンス最適化

大きなファイルでの最適化

プレビュー更新の最適化

{
  "markdown.preview.scrollPreviewWithEditor": false,
  "markdown.preview.markdownItPlugins": false
}

メモリ使用量の削減

{
  "markdown.preview.refreshInterval": 2000,
  "workbench.editor.limit.enabled": true,
  "workbench.editor.limit.value": 10
}

起動速度の改善

不要な機能の無効化

{
  "markdown.preview.breaks": false,
  "markdown.preview.linkify": false,
  "markdown.preview.typographer": false
}

高度な活用テクニック

カスタムショートカットの設定

独自のキーバインド作成

keybindings.jsonにカスタムショートカットを追加：

[
  {
    "key": "ctrl+m ctrl+p",
    "command": "markdown.showPreviewToSide",
    "when": "editorLangId == markdown"
  },
  {
    "key": "ctrl+m ctrl+v",
    "command": "markdown.showPreview",
    "when": "editorLangId == markdown"
  }
]

ワークスペース固有の設定

プロジェクトごとの設定

.vscode/settings.jsonにプロジェクト固有の設定を記述：

{
  "markdown.styles": [
    "./docs/styles/custom.css"
  ],
  "markdown.preview.fontFamily": "Georgia, serif",
  "markdown.preview.fontSize": 16
}

自動化スクリプト

タスクランナーとの連携

.vscode/tasks.jsonでMarkdown処理を自動化：

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Markdown to PDF",
      "type": "shell",
      "command": "markdown-pdf",
      "args": ["${file}"],
      "group": "build"
    }
  ]
}

まとめ

VS CodeでMarkdownプレビューを効率的に使いこなすためのポイントをまとめます：

基本ショートカット

  • 新しいタブでプレビュー：Ctrl + Shift + V（MacはCmd + Shift + V）
  • サイド・バイ・サイドプレビュー：Ctrl + K → V（MacはCmd + K → V）

効率的な使い方

  • サイド・バイ・サイドを活用してリアルタイム確認
  • 自動スクロール同期で編集位置を常に確認
  • カスタムCSSで見やすいプレビューに調整

カスタマイズのポイント

  • settings.jsonで自分好みの設定に調整
  • 拡張機能で機能を拡張
  • ワークスペース設定でプロジェクトごとに最適化

トラブル対応

  • ファイル拡張子とエンコーディングを確認
  • 拡張機能の競合をチェック
  • 設定のリセットで初期状態に戻す

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました