Hugo君って素敵！ 非エンジニアでWordPresは嫌いで、だけど重箱の隅々までデザインをほじくりたい私にはぴったり!!
さっそくカスタムテーマを作ろうと思って、VSCodeで関連ファイル（HTML）を開いたら、そっか、Hugoの構文（Go template）は、そのままだとシンタックスハイライトされないのか…。
👇ちなみに、{{ ... }}で囲まれているところが、Hugoの構文です。
👇そこで定番らしい？VSCode拡張が登場！
ただ、{{や}}の色がねえ。真っ赤でちとキツい。そして拡張自体には色を替える設定はない。
ハイライトの色の替え方
- 上で紹介したHugo拡張 Hugo Language and Syntax Support をインストール
-
VSCodeの設定ファイル（
settings.json）に、以下のコードブロックの内容をコピペ
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": [
"punctuation.section.embedded.begin.hugo",
"punctuation.section.embedded.end.hugo"
],
"settings": {
"foreground": "#b58900"
}
}
]
}
**スコープ（scope）**って奴を特定して、foregroundで色を指定しています。
{{のスコープの調べ方は、{{にカーソルを置いておき、コマンドパレット（Ctrl + Shift + P）に「> 開発者: エディタートークンとスコープの検査」と入れて、出てきた候補をクリック。すると、以下のようなボックスが現れ、下の方にスコープが記載されています。
{{と}}に関しては、別々のスコープが割り当てられているので、先のコードではscopeの値を２つ指定しています。
👇設定が成功すれば、{{と}}の色味が変わるはず（スクショだと分かりにくいかな？）。
注意点と補足
🚨設定ファイルsettings.jsonで設定した色などの設定は、テーマを変更しても替わりません。そのつど、手動で設定し直す必要があります（見た目に支障がないなら、そのままでも良いわけですが）。
🎨使用中のテーマ Solarizedと色味を揃えたかったので、GPTに「このリンク先から、テーマの使用色を抜き出して」と頼んだら、色のリストを作ってもらえました。
コメントアウトのハイライトも微修正
先の{{と}}の修正に、Hugoコメントアウト{{ /*...*/ }}の色味修正も加えてみましょう。fontStyle: "italic"の指定も加え、斜体になるようにしています。
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": [
"punctuation.section.embedded.begin.hugo",
"punctuation.section.embedded.end.hugo"
],
"settings": {
"foreground": "#b58900"
}
},
{
"scope": "comment.block.hugo",
"settings": {
"foreground": "#839496",
"fontStyle": "italic"
}
}
]
}
👇こんな風に、設定が成功すれば表示されますよ✨
ついでに"ショートコード"もハイライトします？
先のHugo拡張だと、ショートコード（Markdownで記事を書くときに、リッチなブロックを色々挿入するのに使える）は、ハイライトされません。
ま、それが気になって仕方がないという奇特な人は（Hugoなんか使っている少数派の中でも）少数でしょうけど、いちおうの解決策はこちら👇
- いちばん最初に、VSCodeの
settings.jsonに、以下のコードブロックの内容をコピペして下さい - その次に、拡張HighlightをVSCodeにインストールしましょう
"highlight.regexes": {
"(?<=\\{\\{\\<\\s)(.*?)(?=\\s\\>\\}\\})": {
"filterFileRegex": ".*\\.md$",
"decorations": [
{
"color": "#b58900"
}
]
}
}
👆(?<=\\{\\{\\<\\s)(.*?)(?=\\s\\>\\}\\})という呪文めいたところが正規表現と呼ばれるものです。
色を替えたい時は、settings.jsonの、colorの値を変更します。背景色（background-color）、文字の太さ（font-weight）、斜体（font-style）も設定可能。
👇こんな風に、記事の中のショートコード{{< ... >}}がハイライトされれば、正常に動作しています。
"Go Template"は使えん
以下は失敗の記録。完全に蛇足だから読まなくて良いよ。
「Hugoの拡張は色がイマイチだからなあ～」とChatGPTに言ったら、GTPめが最初に推してきたのが、このGo Templeteの拡張。ところが、こいつを入れて.htmlに適用させると、めでたくHugoの構文には色が付くものの、HTMLのシンタックスハイライトは効かなくなるんである。それじゃあ意味がないだろう!!（少なくとも私にとっては）
その後、「{{ ... }}にハイライトが当たるように、Highlight拡張を入れて、正規表現で指定すればいいんじゃん」と（私が）思いつき、でも正規表現なんか忘れちまってるから、「GPTに丸投げしてコピペすればいいや～」と思ったら。
なんとGTP君、思いのほか正規表現が苦手!!
いやまあ、「{{ ... }}の全部がハイライトされると格好悪いから、せめて{{ ... }}って風に、中だけ色を付けたい」とか、注文をつけた私も悪かったのかもしれないが。
すぐ人のせいにすんだよGTP。「この拡張機能は正規表現の扱いが特殊なんすよ」とか。特殊って分かってんなら、それに合わせて代案を出せよ。なんで今度こそ完璧な解答ですって言って、たった２種類の解答をループし続けるんだ？ 私が、あやふやな知識で修正を試みて正解を導くと、「さすが!! まるでプロ!! 試行錯誤の天才!! あなたの苦労はきっと財産になる」みたいな言葉を、やたら長々と並べ立てる。おまえ、そのスペック、もっと有益なこと（正解を探すとか）に振り向けられないの??
しかも結局さ、ふと私に疑問が生まれてさ、「Hugoの拡張機能って、本当にハイライトの色を替えられないの？」って質問を、GTPに投げてみたの。そしたらよ、「拡張の設定からは替えられないけど、VSCode本体側の設定から替える手はあるよ～」って。
おいおいおい!! それ、Go Templateを推す前に、正規表現の沼にはまる前に、教えてくれよ!!!!
そして、へたくそな正規表現の指定でベターっと色変えるよりも、Hugoの拡張でハイライトされた色を微修正する方が、（いくらかは）見た目が良くなった😭
👇（これは、Highlightでベターっと色替えしたやつ）
ま、Highlightも、ショートコードの色付けには活かせているから、結果オーライってことで良いんだけどさ……。
終わりの言葉
GTPよ。今回も（最後の最後には）助けてくれてありがとう。でもさ。
- もっと正規表現を勉強しよう（基本中の基本だろ。AIのくせに）
- 質問者をおだてたり、他のツールを悪者にする前に、まず自分が「わかってない」現状を認めろ
まあ、質問者がポンコツだと、AIも限りなくポンコツに寄せてくるという、悲しい現実を目の当たりにしただけではありますが。
そしてこの記事も、どうせ一部だけ切り取られてAIの肥やしになるんだろ？ いいよもう。好きにして呉れ給へ。