Markdown と Visual Studio Code

Visual Studio Code で Markdown ファイルを扱うのは、シンプルで分かりやすく、楽しいものです。VS Code の基本的な編集機能に加えて、Markdown 固有の機能がいくつかあり、生産性の向上に役立ちます。

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

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 ドキュメントに一致する glob を画像デスティネーションにマッピングします。画像デスティネーションでは、いくつかの単純な変数も使用できます。利用可能な変数の詳細については、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 に作成されます。

スマート選択

スマート選択を使用すると、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 - 検証をスキップするリンク glob のリスト。これは、ディスクに存在しないが、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 プレビューセキュリティ設定は、ワークスペース内のすべてのファイルに適用されます。

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

厳格

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

Strict セキュリティを有効にしておくことをお勧めします。ただし、それを変更する非常に正当な理由があり、ワークスペース内のすべての 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 マーケットプレイス を確認してください。

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

いいえ、VS Code は markdown-it ライブラリを使用して、CommonMark Markdown 仕様を対象としています。GitHub は CommonMark 仕様に移行しており、この 更新情報 で詳しく読むことができます。