vscodeが使うTypeScript.tmLanguageに基づいて構文ハイライトを実現する

vscodeはTypeScriptの構文ハイライトのために TypeScript.tmLanguage という定義ファイルをもっています。

この tmLanguage はもともとTextmate用の構文定義言語のようですが、vscodeプロジェクト群はこれを利用する構文ハイライトエンジンも提供しています。

つまりこれらを使うと、vscodeと同じ構文ハイライトを実装できるということ!所用でTypeScriptのカスタム構文ハイライト(モノクロ)が必要なったので、ためしに実装してみました。CSSクラスが多様でまじめに実装するのはけっこう面倒くさいので、今回はCSSクラスの名前ベースで適当にパターンマッチでやっつけました。モノクロとはいうものの、といらえず「薄くする(color: gray)」「濃くする(color: bold)」くらいしかしない想定です。

仕上がりはこんな感じです。

ハイライトの例

コードはここにあります。

github.com