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) を使用する必要がある場合があります)。

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

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

別の 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 - 他の Markdown ファイル内のヘッダーへのリンクの検証を有効/無効にする: [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 ファイルでの数式のレンダリングを無効にするには、"markdown.math.enabled": false を設定します。

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 プレビューのセキュリティ設定は、ワークスペース内のすべてのファイルに適用されます。

これらの各セキュリティ レベルの詳細は次のとおりです。

厳格

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

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

安全でないコンテンツを許可する

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

無効

プレビュー ウィンドウの追加セキュリティを無効にします。これにより、スクリプト実行が許可され、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 仕様への移行を進めており、この更新で読むことができます。