編集

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プレビューに絵文字サポートを追加する方法を示しています。Emoji拡張機能のソースコードはGitHubで確認できます。

以下も参考にしてください。

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

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

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

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

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

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

08/07/2025