Markdown と Visual Studio Code

Visual Studio Code での Markdown ファイルの操作は、シンプルで直感的、そして楽しいものです。VS Code の基本的な編集機能に加え、生産性を高めるための Markdown 専用機能がいくつか用意されています。

注: Markdown ファイルの編集を始めるにあたり、ドキュメントライタープロファイルテンプレートを使用すると、便利な拡張機能（スペルチェッカー、Markdown リンターなど）をインストールし、適切な設定値を構成できます。

Markdown の編集

ドキュメントのアウトライン

アウトラインビューは、エクスプローラーの下部にある独立したセクションです。展開すると、現在アクティブなエディターのシンボルツリーが表示されます。Markdown ファイルの場合、シンボルツリーは Markdown ファイルのヘッダー階層になります。

Markdown Outline view

アウトラインビューは、ドキュメントのヘッダー構造と概要を確認するのに最適な方法です。

Markdown 用のスニペット

VS Code には、Markdown の記述を高速化できる便利なスニペットが含まれています。これには、コードブロックや画像などのスニペットが含まれます。編集中に ⌃Space (Windows, Linux Ctrl+Space) （提案のトリガー）を押すと、推奨される Markdown スニペットのリストが表示されます。コマンドパレットで **Insert Snippet** を選択して、専用のスニペットピッカーを使用することもできます。

ヒント: 独自のユーザー定義スニペットを Markdown に追加できます。ユーザー定義スニペットを参照して、その方法を確認してください。

ファイル内のヘッダーへ移動

⇧⌘O (Windows, Linux Ctrl+Shift+O) を使用して、現在のファイル内のヘッダーに素早くジャンプします。

Jumping to a header in a Markdown file

ファイル内のすべてのヘッダーを参照するか、ヘッダー名を入力して目的のヘッダーを見つけることができます。目的のヘッダーが見つかったら、Enter キーを押してカーソルを移動します。ヘッダーへのジャンプをキャンセルするには Esc キーを押します。

ワークスペース内のヘッダーへ移動

⌘T (Windows, Linux Ctrl+T) を使用して、現在のワークスペース内のすべての Markdown ファイル全体でヘッダーを検索します。

Jumping to a header across all Markdown files in a workspace

ヘッダー名の入力を開始してリストを絞り込み、目的のヘッダーを見つけます。

パスの補完

パス補完は、ファイルや画像へのリンクを作成するのに役立ちます。これらのパスは、画像やリンクのパスを入力すると IntelliSense によって自動的に表示されます。また、⌃Space (Windows, Linux Ctrl+Space) を使用して手動で要求することもできます。

Path completions in a Markdown link

/ で始まるパスは現在のワークスペースルートからの相対パスとして解決され、./ で始まるパスやプレフィックスがないパスは現在のファイルからの相対パスとして解決されます。パスの提案は / を入力すると自動的に表示されますが、⌃Space (Windows, Linux Ctrl+Space) を使用して手動で呼び出すことも可能です。

パス IntelliSense は、現在のファイル内、または別の Markdown ファイル内のヘッダーへのリンクを作成するのにも役立ちます。パスを # で始めると、ファイル内のすべてのヘッダーの補完が表示されます（設定によっては、これらを表示するために ⌃Space (Windows, Linux Ctrl+Space) を使用する必要がある場合があります）。

Header section suggestions in a Markdown link

パス IntelliSense は "markdown.suggest.paths.enabled": false で無効にできます。

別のファイルのヘッダーへのリンクを作成する

別の Markdown ドキュメントのヘッダーにリンクしたいが、フルパスを覚えていない、あるいは入力したくない場合は、ワークスペースヘッダー補完を使ってみてください！開始するには、Markdown リンク内で ## と入力するだけで、現在のワークスペース内のすべての Markdown ヘッダーのリストが表示されます。

Suggestions for all Markdown headers in the current workspace

これらの補完のいずれかを受け入れると、別のファイルにある場合でも、そのヘッダーへの完全なリンクが挿入されます。

Adding a link to the selected header in another file

ワークスペースヘッダー補完を表示するかどうか/いつ表示するかは、 markdown.suggest.paths.includeWorkspaceHeaderCompletions VS Code で開く VS Code Insiders で開く設定で構成できます。有効な設定値は以下の通りです。

onDoubleHash (デフォルト) — ## と入力した後にのみワークスペースヘッダー補完を表示します。
onSingleOrDoubleHash — # または ## と入力した後にワークスペースヘッダー補完を表示します。
never — ワークスペースヘッダー補完を表示しません。

現在のワークスペース内のすべてのヘッダーを見つけるのは負荷がかかる可能性があるため、特に Markdown ファイルが多いワークスペースでは、最初に要求されたときにわずかな遅延が発生する場合があることに留意してください。

画像とファイルへのリンクの挿入

パス補完に加え、VS Code は Markdown ドキュメントに画像やファイルリンクを挿入する他のいくつかの方法もサポートしています。

ファイルを VS Code のエクスプローラーやオペレーティングシステムから Markdown エディターに**ドラッグ＆ドロップ**できます。VS Code のエクスプローラーから Markdown コードの上にファイルをドラッグし、Shift キーを押しながらファイル内にドロップします。プレビューカーソルがドロップ時にどこに挿入されるかを示します。

Inserting a Markdown link by dragging and dropping from the explorer

キーボード操作を好む場合は、ファイルや画像データを Markdown エディターに**コピー＆ペースト**することもできます。ファイル、ファイルへのリンク、または URL を貼り付ける際、Markdown リンクとして挿入するか、プレーンテキストとしてリンクを含めるかを選択できます。

Inserting a Markdown link by pasting a link in the editor

または、**Markdown: Insert Image from Workspace** コマンドを使用して画像を挿入し、**Markdown: Insert Link to File in Workspace** コマンドを使用してファイルリンクを挿入することもできます。

挿入された画像は Markdown 画像構文 ![](path/to/image.png) を使用します。リンクは通常の Markdown リンク [](path/to/file.md) を挿入します。

デフォルトでは、VS Code はワークスペース外からドロップまたは貼り付けられた画像を自動的にワークスペース内にコピーします。 markdown.copyFiles.destination VS Code で開く VS Code Insiders で開く設定は、新しい画像ファイルを作成する場所を制御します。この設定は、現在の Markdown ドキュメントに一致する glob パターンを画像の保存先にマップします。画像の保存先には単純な変数を使用することもできます。利用可能な変数の詳細については、 markdown.copyFiles.destination VS Code で開く VS Code Insiders で開く設定の説明を参照してください。

例えば、ワークスペース内の /docs 以下のすべての Markdown ファイルで、新しいメディアファイルを現在のファイル固有の images ディレクトリに配置したい場合は、次のように記述できます。

"markdown.copyFiles.destination": {
  "/docs/**/*": "images/${documentBaseName}/"
}

これで、新しいファイルが /docs/api/readme.md に貼り付けられると、画像ファイルは /docs/api/images/readme/image.png に作成されます。

単純な正規表現を使用して、スニペットと同様の方法で変数を変換することもできます。例えば、この変換ではメディアファイルを作成する際にドキュメントファイル名の最初の文字のみを使用します。

"markdown.copyFiles.destination": {
  "/docs/**/*": "images/${documentBaseName/(.).*/$1/}/"
}

新しいファイルが /docs/api/readme.md に貼り付けられると、画像は /docs/api/images/r/image.png に作成されるようになります。

画像の代替テキストの生成

AI を使用して、Markdown ファイル内の画像の代替テキスト（alt text）を生成または更新できます。代替テキストを生成するには：

VS Code 環境で Copilot を設定していることを確認してください。Copilot は無料で開始できます。
Markdown ファイルを開きます。
カーソルを画像リンクに置きます。
コードアクション（電球）アイコンを選択し、**Generate alt text** を選択します。
すでに代替テキストがある場合は、コードアクションを選択し、**Refine alt text** を選択します。

スマート選択

スマート選択により、Markdown ドキュメント内の選択範囲をすばやく拡大・縮小できます。これを使用して、ブロック要素全体（コードブロックやテーブルなど）を素早く選択したり、Markdown ファイル内のヘッダーセクション全体の内容を選択したりできます。

スマート選択には以下のコマンドが使用されます。

展開: ⌃⇧⌘→ (Windows、Linux Shift+Alt+Right)
縮小: ⌃⇧⌘← (Windows、Linux Shift+Alt+Left)

選択範囲は以下に適用され、伝統的な階層パターンに従います。

ヘッダー
リスト
ブロッククォート
フェンス付きコードブロック
HTML コードブロック
段落

Smart select within a Markdown document expands from a block element, to the block element containing it, to the rest of the content under a header, to the header itself

リンクの検証

リンクの検証は、Markdown コード内のローカルリンクが有効かどうかを確認します。これにより、名前変更されたヘッダーへのリンクや、ディスク上に存在しなくなったファイルへのリンクなど、一般的な間違いを検知できます。

A warning shown in the editor when linking to a file that does not exist

リンクの検証はデフォルトでオフになっています。有効にするには、"markdown.validate.enabled": true を設定します。これにより、VS Code はヘッダー、画像、その他のローカルファイルへの Markdown リンクを分析します。無効なリンクは警告またはエラーとして報告されます。すべてのリンク検証はローカルで行われ、外部の http(s) リンクのチェックは行われません。

リンク検証をカスタマイズするために使用できる設定がいくつかあります。

markdown.validate.fileLinks.enabled VS Code で開く VS Code Insiders で開く - ローカルファイルへのリンクの検証を有効/無効にします: [link](/path/to/file.md)
markdown.validate.fragmentLinks.enabled VS Code で開く VS Code Insiders で開く - 現在のファイル内のヘッダーへのリンクの検証を有効/無効にします: [link](#_some-header)
markdown.validate.fileLinks.markdownFragmentLinks VS Code で開く VS Code Insiders で開く - 他の Markdown ファイル内のヘッダーへのリンクの検証を有効/無効にします: [link](other-file.md#some-header)
markdown.validate.referenceLinks.enabled VS Code で開く VS Code Insiders で開く - 参照リンクの検証を有効/無効にします: [link][ref]。
markdown.validate.ignoredLinks VS Code で開く VS Code Insiders で開く - 検証をスキップするリンクの glob パターンのリストです。これは、ディスク上には存在しないが Markdown が公開されると存在するファイルへのリンクを記述する場合に便利です。

ヘッダーとリンクのすべての参照を検索

**Find All References** (⇧⌥F12 (Windows, Linux Shift+Alt+F12)) コマンドを使用して、現在のワークスペース内で Markdown ヘッダーやリンクが参照されているすべての場所を見つけます。

Jumping to a header in a Markdown file

**Find All References** は以下をサポートしています。

ヘッダー: # My Header。#my-header へのすべてのリンクを表示します。
外部リンク: [text](http://example.com)。http://example.com へのすべてのリンクを表示します。
内部リンク: [text](./path/to/file.md)。./path/to/file.md へのすべてのリンクを表示します。
リンク内のフラグメント: [text](./path/to/file.md#my-header)。./path/to/file.md 内の #my-header へのすべてのリンクを表示します。

ヘッダーとリンクの名前変更

Markdown ヘッダーを変更するたびに誤ってリンクを壊してしまうことにうんざりしていませんか？代わりに **Rename Symbol** (F2) を使用してみてください。新しいヘッダー名を入力して Enter を押すと、VS Code はヘッダーを更新し、そのヘッダーへのすべてのリンクも自動的に更新します。

Renaming a Markdown header to update all links to it

また、F2 は以下でも使用できます。

ヘッダー: # My Header。これにより、#my-header へのすべてのリンクが更新されます。
外部リンク: [text](http://example.com/page)。これにより、http://example.com/page にリンクしていたすべての場所が更新されます。
内部リンク: [text](./path/to/file.md)。これにより、ファイル ./path/to/file.md が名前変更され、それへのすべてのリンクも更新されます。
リンク内のフラグメント: [text](./path/to/file.md#my-header)。これにより、./path/to/file.md 内のヘッダーが名前変更され、それへのすべてのリンクも更新されます。

ファイル移動または名前変更時の自動リンク更新

自動 Markdown リンク更新機能により、VS Code はリンク先のファイルが移動または名前変更されたときに自動的に Markdown リンクを更新します。この機能は markdown.updateLinksOnFileMove.enabled VS Code で開く VS Code Insiders で開く設定で有効にできます。有効な設定値は以下の通りです。

never (デフォルト) — リンクを自動的に更新しません。
prompt — リンクを更新する前に確認を求めます。
always — 確認なしで自動的にリンクを更新します。

自動リンク更新は、Markdown ファイル、画像、ディレクトリの名前変更を検出します。その他のファイルタイプについても markdown.updateLinksOnFileMove.include VS Code で開く VS Code Insiders で開くで有効にできます。

Markdown プレビュー

VS Code は標準で Markdown ファイルをサポートしています。Markdown テキストを書き始め、ファイルを .md 拡張子で保存するだけで、エディターの表示をコードと Markdown ファイルのプレビュー間で切り替えることができます。もちろん、既存の Markdown ファイルを開いて作業を開始することも可能です。表示を切り替えるには、エディターで ⇧⌘V (Windows, Linux Ctrl+Shift+V) を押します。プレビューを編集中ファイルの横に並べて表示し（⌘K V (Windows, Linux Ctrl+K V)）、編集内容をリアルタイムで確認することもできます。

簡単なファイルでの例を以下に示します。

Markdown Preview

ヒント: エディターのタブを右クリックして **Open Preview** (⇧⌘V (Windows, Linux Ctrl+Shift+V)) を選択するか、**コマンドパレット** (⇧⌘P (Windows, Linux Ctrl+Shift+P)) を使用して **Markdown: Open Preview to the Side** コマンド (⌘K V (Windows, Linux Ctrl+K V)) を実行することもできます。

動的なプレビューとプレビューのロック

デフォルトでは、Markdown プレビューは現在アクティブな Markdown ファイルをプレビューするように自動的に更新されます。

The preview automatically switching to preview the current Markdown document

**Markdown: Toggle Preview Locking** コマンドを使用して Markdown プレビューをロックし、現在の Markdown ドキュメントに固定することができます。ロックされたプレビューはタイトルに **[Preview]** と表示されます。

A locked Markdown preview

注: **Markdown: Toggle Preview Locking** コマンドは、Markdown プレビューがアクティブなタブである場合にのみ利用可能です。

エディターとプレビューの同期

VS Code は、Markdown エディターとプレビューペインを自動的に同期します。Markdown プレビューをスクロールすると、エディターもプレビューの表示範囲に合わせてスクロールします。Markdown エディターをスクロールすると、プレビューもその表示範囲に合わせてスクロールします。

Markdown Preview editor selection scroll sync

スクロール同期は markdown.preview.scrollPreviewWithEditor VS Code で開く VS Code Insiders で開くおよび markdown.preview.scrollEditorWithPreview VS Code で開く VS Code Insiders で開く設定を使用して無効にできます。

エディターで現在選択されている行は、Markdown プレビューの左余白にある明るい灰色のバーで示されます。

Markdown Preview editor line marker

さらに、Markdown プレビュー内の要素をダブルクリックすると、自動的にそのファイルのエディターが開き、クリックされた要素に最も近い行までスクロールします。

Markdown Preview double click switches to editor

diff ビューでの Markdown プレビュー

Markdown プレビューは diff（差分）もレンダリングでき、生の Markdown ソースの代わりに、変更箇所が強調表示されたレンダリング済みのドキュメントを表示できます。

この動作はオプトインです。個別の diff をプレビューに切り替えるか、Markdown の diff に使用されるデフォルトのエディターを変更できます。

Markdown プレビューで個別の diff を開く

開いている Markdown の diff（例: **ソース管理** ビューから開いたファイル）をレンダリング済みのプレビューに切り替えるには：

diff エディターがアクティブな状態で、コマンドパレット (⇧⌘P (Windows, Linux Ctrl+Shift+P)) から **View: Reopen Editor With...** を実行します。
**Markdown Preview** を選択します。

元に戻すには、もう一度 **View: Reopen Editor With...** を実行し、デフォルトのテキストエディターを選択します。

Markdown プレビューをデフォルトのエディターとして設定する

すべての .md ファイル（diff を含む）のデフォルトエディターとして Markdown プレビューを設定するには、 workbench.editorAssociations VS Code で開く VS Code Insiders で開く設定を構成します。

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

この設定により、エクスプローラーから Markdown ファイルを開いたり、ソース管理から Markdown の diff を開いたりすると、デフォルトでレンダリング済みのプレビューが開くようになります。引き続き **View: Reopen Editor With...** を使用して、個々のエディターをテキストビューに戻すことができます。

Markdown プレビューを diff にのみ使用する

通常のファイルオープンはテキストエディターで行い、Markdown の diff のみをプレビューでレンダリングするには、 workbench.diffEditorAssociations VS Code で開く VS Code Insiders で開く設定を使用します。

"workbench.diffEditorAssociations": {
    "*.md": "vscode.markdown.preview.editor"
}

diff ビューでは workbench.diffEditorAssociations が workbench.editorAssociations よりも優先されます。これら2つの設定を組み合わせることで、通常のファイルオープンはデフォルトでプレビューにしつつ、diff はテキストエディターに維持することができます。

"workbench.editorAssociations": {
    "*.md": "vscode.markdown.preview.editor"
},
"workbench.diffEditorAssociations": {
    "*.md": "default"
}

インラインおよびサイドバイサイドレイアウト

Markdown の diff プレビューは、テキスト diff エディターと同様に、サイドバイサイドおよびインラインの両方のレイアウトをサポートしています。レイアウトを切り替えると、新しく開く Markdown diff エディターのデフォルトが更新されます。

サイドバイサイドプレビューでは、2つのエディター間でスクロールが同期され、スクロールしても一致するコンテンツが並ぶように維持されます。変更された行は強調表示され、行内の変更は、変更された正確な単語やフレーズを呼び出すようにより強く強調表示されます。

Mermaid 図のレンダリング

VS Code の組み込み Markdown プレビューは、mermaid フェンス付きコードブロック内の Mermaid 図をレンダリングします。

```mermaid
flowchart LR
  Sleep[Sleep] --> Wake{Awake?}
  Wake -->|No| Sleep
  Wake -->|Hungry| Snack[Get treat]
  Wake -->|Not in sunbeam| Move[Move to sunbeam]
  Wake -->|Human is typing| Keyboard[Sleep on keyboard]
  Snack --> Sleep
  Move --> Sleep
  Keyboard --> Sleep
```

レンダリングされたプレビューでは、大きな図をパンおよびズームしてその場で確認できます。デフォルトでは、マウス操作には Alt（macOS では Option）を使用します。押しながらドラッグでパン、スクロールでズーム、図をクリックで拡大できます。Alt+Shift を押しながらクリックで縮小します。また、Alt を押さずにピンチジェスチャでズームすることもできます。

図にカーソルを合わせるかフォーカスすると、パンモードの切り替え、拡大、縮小、パンとズームのリセットを行うコントロールが表示されます。レンダリングされた図のコンテキストメニューを開き、**Copy Diagram Source** を選択してその Mermaid ソースをコピーします。

数式レンダリング

VS Code の組み込み Markdown プレビューは、KaTeX を使用して数式をレンダリングします。

$Markdown Preview rendering of math formulas with KaTeX$

インライン数式は単一のドル記号で囲みます。

Inline math: $x^2$

二重のドル記号を使用すると、数式ブロックを作成できます。

Math block:

$$
\displaystyle
\left( \sum_{k=1}^n a_k b_k \right)^2
\leq
\left( \sum_{k=1}^n a_k^2 \right)
\left( \sum_{k=1}^n b_k^2 \right)
$$

"markdown.math.enabled": false を設定すると、Markdown ファイル内の数式のレンダリングを無効にできます。

Markdown プレビューの拡張

拡張機能は、Markdown プレビューにカスタムスタイルやスクリプトを提供して、その外観を変更したり新しい機能を追加したりできます。プレビューをカスタマイズする拡張機能の例をいくつか紹介します。

独自の CSS を使用する

"markdown.styles": [] 設定を使用して、Markdown プレビューで独自の CSS を使用することもできます。これは、Markdown プレビューで読み込むスタイルシートの URL をリストします。これらのスタイルシートは、https URL、または現在のワークスペース内のローカルファイルへの相対パスのいずれかです。

例えば、現在のワークスペースのルートにある Style.css というスタイルシートを読み込むには、**ファイル** > **基本設定** > **設定** を使用してワークスペースの settings.json ファイルを開き、この更新を行います。

// Place your settings in this file to overwrite default and user settings.
{
  "markdown.styles": ["Style.css"]
}

改行を作成するために末尾の空白を保持する

強制改行を作成するには、Markdown は行末に2つ以上のスペースを必要とします。ユーザーまたはワークスペースの設定によっては、VS Code が末尾の空白を削除するように構成されている場合があります。Markdown ファイルでのみ末尾の空白を保持するには、settings.json に以下の行を追加できます。

{
  "[markdown]": {
    "files.trimTrailingWhitespace": false
  }
}

Markdown プレビューのセキュリティ

セキュリティ上の理由から、VS Code は Markdown プレビューに表示されるコンテンツを制限しています。これには、スクリプト実行の無効化や、https を介したリソースの読み込みのみの許可が含まれます。

Markdown プレビューがページ上のコンテンツをブロックすると、プレビューウィンドウの右上にアラートポップアップが表示されます。

Markdown security alert

このポップアップをクリックするか、任意の Markdown ファイルで **Markdown: Change preview security settings** コマンドを実行して、Markdown プレビューで許可されるコンテンツを変更できます。

Markdown security selector

Markdown プレビューのセキュリティ設定は、ワークスペース内のすべてのファイルに適用されます。

各セキュリティレベルの詳細を以下に示します。

Strict（厳格）

これがデフォルト設定です。信頼されたコンテンツのみを読み込み、スクリプト実行を無効にします。http 画像をブロックします。

変更する正当な理由があり、かつワークスペース内のすべての Markdown ファイルを信頼している場合を除き、Strict セキュリティを有効に保つことをお勧めします。

Allow insecure content（非セキュアなコンテンツを許可）

スクリプトは無効のままですが、http を介したコンテンツの読み込みを許可します。

Disable（無効）

プレビューウィンドウの追加セキュリティを無効にします。これによりスクリプトの実行が可能になり、http を介したコンテンツの読み込みも許可されます。

ドキュメントライタープロファイルテンプレート

プロファイルを使用すると、現在のプロジェクトやタスクに応じて、拡張機能、設定、UI レイアウトをすばやく切り替えることができます。Markdown の編集を始めるにあたり、便利な拡張機能と設定が厳選されたドキュメントライタープロファイルテンプレートを使用できます。プロファイルテンプレートをそのまま使用することも、独自のワークフローに合わせてカスタマイズするための開始点として使用することもできます。

プロファイルテンプレートは、プロファイル > プロファイルの作成... ドロップダウンから選択します。

プロファイルテンプレートを選択したら、設定と拡張機能を確認し、新しいプロファイルに含めたくない個々のアイテムを削除できます。テンプレートに基づいて新しいプロファイルを作成した後、設定、拡張機能、または UI に加えた変更はプロファイルに保存されます。

Markdown 拡張機能

VS Code が標準で提供する機能に加えて、拡張機能をインストールすることでより高度な機能を利用できます。

ヒント: 拡張機能のタイルを選択して説明やレビューを読み、最適な拡張機能を見つけてください。マーケットプレイスで詳細をご覧ください。

次のステップ

詳細については、以下をお読みください。

CSS、SCSS、Less - CSS を編集したいですか？VS Code には CSS、SCSS、および Less 編集のための優れたサポートが備わっています。

よくある質問

スペルチェックはありますか？

VS Code にはインストールされていませんが、スペルチェックの拡張機能があります。VS Code マーケットプレイスで、ワークフローに役立つ拡張機能を探してみてください。

VS Code は GitHub Flavored Markdown をサポートしていますか？

いいえ、VS Code は markdown-it ライブラリを使用して CommonMark Markdown 仕様をターゲットとしています。GitHub は CommonMark 仕様へと移行しており、これについてはこのアップデートで確認できます。

5/28/2026