Markdown拡張機能

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

CSSでMarkdownプレビューの外観を変更する

拡張機能はCSSを提供して、Markdownプレビューの外観やレイアウトを変更できます。スタイルシートは、拡張機能の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プレビュー内で実行されるスクリプトを提供できます。

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

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

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

04/03/2025