Visual Studio CodeのMarkdown Previewを拡張する

VSCode の Markdown パーサーには markdown-it が使われています。今回は markdown-it のプラグインを使って VSCode の Markdown プレビューを拡張するという内容です。

環境

package.json
{
	"name": "vscode-markdown-it-plugins",
	"displayName": "vscode-markdown-it-plugins",
	"description": "",
	"version": "0.0.1",
	"publisher": "shooontan",
	"engines": {
		"vscode": "^1.38.0"
	},
	"activationEvents": [],
	"main": "./out/extension.js",
	"contributes": {
		"markdown.markdownItPlugins": true
	},
	"scripts": {
		"vscode:prepublish": "npm run compile",
		"compile": "tsc -p ./"
	},
	"devDependencies": {
		"@types/markdown-it": "0.0.9",
		"@types/node": "^10.17.6",
		"typescript": "^3.7.2"
	}
}
tsconfig.json
{
	"compilerOptions": {
		"module": "commonjs",
		"target": "es6",
		"outDir": "out",
		"lib": [
			"es6"
		],
		"sourceMap": true,
		"rootDir": "src",
		"strict": true
	},
	"exclude": [
		"node_modules",
		".vscode-test"
	]
}

ここでは markdown-it のプラグインである markdown-it-emoji を VSCode のプラグインに導入してプレビュー画面を拡張します。

まずは markdown-it-emoji をインストールします。

npm install markdown-it-emoji

つぎに extension.ts を作成して、以下のコードを追加します。

src/extension.ts
import * as MarkdownIt from 'markdown-it';

export function activate() {
  return {
    extendMarkdownIt(md: MarkdownIt) {
      return md.use(require('markdown-it-emoji'));
    },
  };
}

プラグインのコードは以上です。次はコードをプラグイン用にパッケージングしていきます。

vsceでvsixを作成

vsce を使って、VSCode プラグインとなる vsix ファイルを作成します。vsce は npm からインストールできます。

npm install -g vsce

プラグイン用にコードをパッケージングします。

vsce package

作成したプラグインをインストール

上記で作成したプラグイン vscode-markdown-it-plugins-0.0.1.vsix を VSCode にインストールします。

Command + Shift + P からコマンドパレットを開いて install from VSIX を入力し、目的のプラグインファイルを選択すれば自動でインストールが行われます。

最後にプラグインを反映させるためにコマンドパレットに reload window を入力して VSCode を再起動させると完了です。

https://storage.mahoroi.com/blog/posts/imgs/2019/12/vscode-markdown-preview01.png

無事 emoji が表示されてます。おしまい。

参考