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の肥やしになるんだろ？いいよもう。好きにして呉れ給へ。