LoginSignup
4
5

More than 5 years have passed since last update.

Visual Studio Code に組み込まれている Markdown 拡張機能を切り出してみた

Last updated at Posted at 2017-02-17

これは何?

Visual Studio Code の source tree から Markdown Extension (Markdown モードは拡張機能として実装されています)を切り出したものです。(ベースは、vscode insiders 1.10.0 2017-02-16T07:02:25.975Z)

動きは、標準の Markdown モードと同じです。

  • 自分の勉強用に切り出してみた
  • 勉強用途やオレオレ Markdown プレビューなどを作成する場合に参考になります
    • Markdown-it plugin を追加してみるとか、新しい機能を追加してみるとか、まったく別なものにしてしまうとか。。。
  • clone して、npm install を実行後、F5 キーを押せばすぐに動かすことができます(できるはず)
$ git clone https://github.com/satokaz/vscode-markdown-mock.git
$ cd vscode-markdown-mock
$ npm install
$ code .
  • F5 キーでデバッグ開始
  • vscode に組み込まれている markdown extension を上書きします
    スクリーンショット 2017-02-16 18.29.54.png
    [/Users/satokaz/Gits/vscode-markdown-mock]: 拡張機能 /Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/extensions/markdown を /Users/satokaz/Gits/vscode-markdown-mock で上書きしています。

    • なので、別な拡張機能の雛形に使う場合は、package.json の編集やコマンドがぶつからないようにする必要あり
  • extension.ts の 175 行目を変更し、Preview の tab head には 🌸 のアイコンがつくようになっているので、少しわかりやすいかなと思います(変更点はこれだけ)
    スクリーンショット 2017-02-16 18.28.47.png

.vsix

vsce をインストールして package も作れます。

作成したものは、こちらに。VSIX からのインストール で拡張機能としてインストールすることもできます。

ちょっと改造したもの

ちょっと改造したものを showHTML ブランチに作成しています。

  • https://github.com/satokaz/vscode-markdown-mock/tree/showHTML

  • こちらの branch は、下記 2 つのコマンドを追加

    • 🌸 Markdown: 🌸 show HTML: Output Chnnel (出力) に HTML レンダリングを出力
    • 🌸 Markdown: 🌸 create HTML File: .md ファイルと同じディレクトリ(何も入力しないで Enter だけ押す)に HTML ファイルとして保存し、ブラウザで開く

スクリーンショット 2017-02-17 10.05.46.png

その他

切り出し方は、README.md で。

  • filter-branch を使って、新しいリポジトリとして切り出すことで、hash 値が書き換わってしまうが commit log を残せる。(が、容量を必要とする)
$ git clone https://github.com/Microsoft/vscode.git
$ cd vscode
$ git filter-branch --subdirectory-filter extensions/markdown HEAD

// リポジトリを掃除(必要であれば
$ git gc --aggressive
$ git prune
$ rm -fr .git/refs/original
4
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
5