Markdown拡張機能

Markdown拡張機能を使用すると、Visual Studio Codeに組み込まれているMarkdownプレビューを拡張および強化できます。これには、プレビューの表示を変更したり、新しいMarkdown構文のサポートを追加したりすることが含まれます。

CSSでMarkdownプレビューの表示を変更する

拡張機能は、Markdownプレビューの表示やレイアウトを変更するためにCSSを提供できます。スタイルシートは、拡張機能のpackage.json内のmarkdown.previewStyles コントリビューションポイントを使用して登録されます。

"contributes": {
    "markdown.previewStyles": [
        "./style.css"
    ]
}

"markdown.previewStyles"は、拡張機能のルートフォルダに対するファイルのリストです。

提供されたスタイルは、組み込みのMarkdownプレビューのスタイルより後に、しかしユーザーの"markdown.styles"より前に追加されます。

Markdown Preview GitHub Styling 拡張機能は、スタイルシートを使用してMarkdownプレビューをGitHubのレンダリングされたMarkdownのように見せる良い例です。拡張機能のソースコードはGitHubで確認できます。

markdown-itプラグインで新しい構文のサポートを追加する

VS CodeのMarkdownプレビューはCommonMark仕様をサポートしています。拡張機能は、markdown-itプラグインを提供することで、追加のMarkdown構文をサポートできます。

markdown-itプラグインを提供するには、まず拡張機能のpackage.jsonに"markdown.markdownItPlugins"コントリビューションを追加します。

"contributes": {
    "markdown.markdownItPlugins": true
}

次に、拡張機能のメインactivation関数で、extendMarkdownItという名前の関数を持つオブジェクトを返します。この関数は現在のmarkdown-itインスタンスを受け取り、新しいmarkdown-itインスタンスを返す必要があります。

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
  return {
    extendMarkdownIt(md: any) {
      return md.use(require('markdown-it-emoji'));
    }
  };
}

複数のmarkdown-itプラグインを提供するには、複数のuseステートメントを連結して返します。

return md.use(require('markdown-it-emoji')).use(require('markdown-it-hashtag'));

markdown-itプラグインを提供する拡張機能は、Markdownプレビューが最初に表示されたときに遅延起動されます。

markdown-emoji 拡張機能は、markdown-itプラグインを使用してMarkdownプレビューに絵文字サポートを追加する方法を示しています。絵文字拡張機能のソースコードはGitHubで確認できます。

以下もご確認ください

markdown-itプラグイン開発者向けのガイドライン
既存のmarkdown-itプラグイン

スクリプトで高度な機能を追加する

高度な機能のために、拡張機能はMarkdownプレビュー内で実行されるスクリプトを提供できます。

"contributes": {
    "markdown.previewScripts": [
        "./main.js"
    ]
}

提供されたスクリプトは非同期でロードされ、コンテンツが変更されるたびにリロードされます。

Markdown Preview Mermaid Support 拡張機能は、スクリプトを使用してMarkdownプレビューにMermaidの図やフローチャートのサポートを追加する方法を示しています。Mermaid拡張機能のソースコードはGitHubで確認できます。

07/09/2025