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で確認できます。