Visual Studio CodeでMarkdownの文字色指定を簡単にする拡張機能

2019年7月20日

 

はじめに

こんにちは、爆走ひつじです。

最近、Windows上で使用するテキストエディタとして、Visual Stdio Codeを使い始めました。

ブログの文章を書くときは、Markdownで技術しています。
Markdownは簡単なルールで、見出しやナンバリング、太字や斜体を指定できるのは魅力ですね。
ただし、文字の色を指定するのが面倒なので、Visual Studio Codeで簡単に指定する方法を考えてみました。

Markdownで文字の色を指定するには

例えば、
文字の色をあかにするには、

文字の色を<font color=#FF0000>あか</font>にするには、

と記述する必要があります。
これがちょっと面倒だなーと思い、拡張機能でよいのがないか探していました。

文字色指定のショートカットを実現してくれる拡張機能

これが意外とない...
作るしかないかなーと半分あきらめモードで見つけたのが、「markdown-helper」という拡張機能です。
markdown-helper
色を指定したい文字を選択し、Ctrl + Shift + c で、以下のような文字色を指定するメニューがでます。
jacoobさん、ありがとう!

f:id:sheepX:20190525222528j:plain
文字色指定メニュー

...ただ、惜しい。
メニューが中国語です。
まぁ、だいたい、どんな色になのかわかるんですが。

 

番外編

ここからは、番外編です。
拡張機能は、javascriptで書かれているので、メニューを日本語に修正するのは難しくなさそうです。
ちょっと直してみました。

拡張機能のパス

Visual Studio Codeの拡張機能は、以下で管理されているようです。(少し自信がないのですが...)

C:\Users\"ユーザ名"\.vscode\extensions\jacoob.markdown-helper-1.1.1

この中の、"extension.js"というファイルを以下のように修正します。

f:id:sheepX:20190525222740j:plain
修正内容
f:id:sheepX:20190525222941j:plain
修正後の文字色指定メニュー

最後に

このブログの作成も、jacoobさんの拡張機能に感謝しつつ利用させていただいています。
githubにもコードが上がっているので、コードをもとに拡張機能の作り方を勉強したいと思います。
github: vscode-markdown-helper

またよろしくです。