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-it プラグイン開発者向けのガイドライン
• 既存の markdown-it プラグイン

スクリプトによる高度な機能の追加

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

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

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

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