Markdown と Visual Studio Code

Visual Studio Code で Markdown ファイルを操作するのは、シンプルで簡単、そして楽しいものです。VS Code の基本的な編集機能に加えて、生産性を高めるための Markdown 固有の機能がいくつかあります。

注: Markdown ファイルの編集を始めるには、Doc Writer プロファイルテンプレートを使用して、便利な拡張機能 (スペルチェッカー、Markdown リンター) をインストールし、適切な設定値を構成できます。

Markdown の編集

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

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

アウトラインビューは、ドキュメントのヘッダー構造とアウトラインを確認するのに非常に便利です。

Markdown 用のスニペット

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

ヒント: Markdown 用に独自のユーザー定義スニペットを追加できます。追加方法については、ユーザー定義スニペットをご覧ください。

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

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

ファイル内のすべてのヘッダーを閲覧したり、ヘッダー名を入力し始めたりして、目的のヘッダーを見つけることができます。目的のヘッダーを見つけたら、Enter を押してカーソルを移動させます。Esc を押すとヘッダーへのジャンプがキャンセルされます。

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

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

ヘッダー名を入力し始めるとリストが絞り込まれ、目的のヘッダーが見つかります。

パス補完

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

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

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

"markdown.suggest.paths.enabled": false を設定すると、パス IntelliSense を無効にできます。

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

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

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

markdown.suggest.paths.includeWorkspaceHeaderCompletions 設定で、ワークスペースヘッダーの補完を表示するかどうか、いつ表示するかを設定できます。有効な設定値は次のとおりです。

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

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

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

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

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

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

または、Markdown: ワークスペースから画像を挿入コマンドを使用して画像を挿入し、Markdown: ワークスペース内のファイルへのリンクを挿入コマンドを使用してファイルリンクを挿入することもできます。

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

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

たとえば、ワークスペース内の /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 ファイル内の画像の代替テキストを生成または更新できます。代替テキストを生成するには

1. VS Code 環境でCopilot が設定されていることを確認してください。Copilot は無料で利用できます。

2. Markdown ファイルを開きます。

3. 画像リンクにカーソルを置きます。

4. コードアクション（電球）アイコンを選択し、代替テキストを生成を選択します。

   

5. 既に代替テキストがある場合は、コードアクションを選択し、代替テキストを洗練を選択します。

スマート選択

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

スマート選択は次のコマンドを使用します。

• 拡張: ⌃⇧⌘→ (Windows, Linux Shift+Alt+Right)
• 縮小: ⌃⇧⌘← (Windows, Linux Shift+Alt+Left)

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

• ヘッダー
• リスト
• ブロック引用
• フェンスされたコードブロック
• HTML コードブロック
• 段落

リンクの検証

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

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

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

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

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

すべての参照を検索 (⇧⌥F12 (Windows、Linux Shift+Alt+F12)) コマンドを使用して、現在のワークスペース内で Markdown ヘッダーまたはリンクが参照されているすべての場所を検索します。

すべての参照を検索 は以下をサポートしています:

• ヘッダー: # 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 ヘッダーを変更するたびに誤ってリンクが壊れることにうんざりしていませんか？代わりにシンボルの名前変更 (F2) を試してみてください。新しいヘッダー名を入力して Enter を押すと、VS Code はヘッダーを更新し、そのヘッダーへのすべてのリンクを自動的に更新します。

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 設定で有効にできます。有効な設定値は以下の通りです。

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

自動リンク更新は、Markdown ファイル、画像、ディレクトリの名前変更を検出します。markdown.updateLinksOnFileMove.include を使用して、追加のファイルタイプに対して有効にすることができます。

Markdown プレビュー

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

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

ヒント: エディターのタブを右クリックしてプレビューを開く（⇧⌘V (Windows、Linux Ctrl+Shift+V)）を選択するか、コマンドパレット（⇧⌘P (Windows、Linux Ctrl+Shift+P)）を使用してMarkdown: サイドでプレビューを開くコマンド（⌘K V (Windows、Linux Ctrl+K V)）を実行することもできます。

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

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

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

注: Markdown: プレビューのロックを切り替えるコマンドは、Markdown プレビューがアクティブなタブである場合にのみ利用可能です。

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

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

markdown.preview.scrollPreviewWithEditor と markdown.preview.scrollEditorWithPreview の設定を使用して、スクロール同期を無効にできます。

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

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

数式のレンダリング

VS Code の組み込み Markdown プレビューは、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 ファイルでMarkdown: プレビューのセキュリティ設定を変更コマンドを実行することで、Markdown プレビューで許可されるコンテンツを変更できます。

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

これらの各セキュリティレベルの詳細を次に示します。

厳格 (Strict)

これはデフォルト設定です。信頼できるコンテンツのみをロードし、スクリプトの実行を無効にします。http 画像をブロックします。

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

安全でないコンテンツを許可 (Allow insecure content)

スクリプトは無効のままですが、コンテンツを http 経由でロードすることを許可します。

無効 (Disable)

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

Doc Writer プロファイルテンプレート

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

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

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

Markdown 拡張機能

VS Code が標準で提供する機能に加えて、さらなる機能性を得るために拡張機能をインストールできます。

ヒント: 拡張機能のタイルを選択して説明とレビューを読み、自分に最適な拡張機能を決定してください。マーケットプレイスでさらに詳しくご覧ください。

次のステップ

さらに読む

• CSS、SCSS、および Less - CSS を編集したいですか？VS Code は CSS、SCSS、Less の編集を強力にサポートしています。

よくある質問

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

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

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

いいえ、VS Code は markdown-it ライブラリを使用して CommonMark Markdown 仕様をターゲットとしています。GitHub は CommonMark 仕様への移行を進めており、その詳細はこのアップデートで読むことができます。