2023/04/02

VSCodeで超お手軽にテンプレートをHighlightする

ハイライトしにくいテンプレート

このブログは、フロントエンドがAPIを叩いてページの情報をJSONで受け取ってレンダリングするような作りではなく、素朴なサーバサイドレンダリングで表示されています。Perl製のアプリで、テンプレートエンジンには Text::Xslate を使っています。シンタックスは Text::Xslate::Syntax::Kolon なのですが、私の過去のこだわりのせいで以下のような謎の設定で記述されています。

suffix      => '.tx',
syntax      => 'Text::Xslate::Syntax::Kolon',
line_start  => ':',
tag_start   => '[%',
tag_end     => '%]',

特筆すべきはタグの開始と終了の識別文字列が TTerse なのです。Kolonなら <: $foo :> なのですが、この設定によって [% $foo %] と書いているわけですね。もともとTTerseのテンプレがあったわけでもなく、私は TTerse 未経験なのに、なぜこうしたのかまったく思い出せません。ともあれ、このブログ全体そこそこテンプレートの量があるので書き換えるのも面倒くさくずっとこの設定できているのでした。

さて、そうしたしょうもない面倒を抱えたテンプレートファイルなのですが、たまにちょろちょろとメンテナンスをしたり、小さなページを作ったりするときに編集作業をすることになります。しかしこれ、うまいことシンタックスハイライトがされないという問題を以前から抱えており、、つまり、テンプレートタグの囲みは TTerse のようだが、テンプレートにコードを書くときの記述は Kolon というふたつの記法が混ざっているので、TTerseのハイライターをあててもいまいちよくならないのです。そして大半の記述は HTML であり、歴史的経緯により生々しい JavaScript が混ざっていることもあり、、

仕方がないので長年テンプレートをただの HTML として扱ったり、しかし逆に目にうるさく感じるようになり近年はただのプレーンテキストで表示してまったくsyntax highlightしないまま編集していたのですが、ここにきてちょっといい感じの拡張機能を見つけたので、それを使ってハイライトを試みてみました。

VSCode 拡張機能 Highlight

VS Code の拡張機能で、その名も Highlight というものです。

これはソースコードを正規表現でひっかけてハイライトできるというもので、なかなか設定できる項目の汎用性が高く、ちょろっと3分クッキングで以下のようにテンプレート記述をハイライトすることに成功したのでした(HTMLハイライトは公式のハイライターで、テンプレート記述がこの Highlight による)。

Before:

After:

Highlight の設定は以下のような感じです。

"highlight.decorations": {
     "rangeBehavior": 3
},
"highlight.regexFlags": "mg",
"highlight.regexes": {
    "(\\[%\\s*[^\\]]+\\s*%\\])": {
        "filterFileRegex": ".*\\.tx",
        "decorations": [
            {
                "backgroundColor": "#332f10",
                "color": "lightyellow"
             }
        ],
    },
    "(^:\\s*)(.+)": {
        "filterFileRegex": ".*\\.tx",
        "decorations": [
            {
                "backgroundColor": "#332f10",
                "color": "#ffccaf"
             },
            {
                "backgroundColor": "#332f10",
                "color": "yellow"
             }
        ]
    }
},
"highlight.minDelay": 50,
"highlight.maxMatches": 250

配色の趣味はさておき、まともな文法を記述したシンタックスハイライターを作ってメンテナンスするコストを考えると、わりとこれで十分戦えそうな気がします。テンプレート側でもっと複雑な書き方がされると設定側ももう少し頑張る必要がありますが、自分にはこれで事足りてしまいましたね。

いやー、、長年の願いがかなって良かった。これでテンプレ編集が楽になるわ(もうあんまりやらないけど)

サイト内検索