Hugo構文（Go Template）のシンタックスハイライトを整える

[Hugo君](https://gohugo.io)って素敵！　非エンジニアでWordPresは嫌いで、だけど重箱の隅々までデザインをほじくりたい私にはぴったり!!

さっそくカスタムテーマを作ろうと思って、VSCodeで関連ファイル（HTML）を開いたら、そっか、Hugoの構文（Go template）は、そのままだとシンタックスハイライトされないのか…。

👇ちなみに、`{{ ... }}`で囲まれているところが、Hugoの構文です。

![Hugoの構文にはデフォルトではシンタックスハイライトは付かない](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4090168/d0981c2f-232c-4353-b63e-b31a7dcb7695.png)

👇そこで定番らしい？VSCode拡張が登場！

https://marketplace.visualstudio.com/items?itemName=budparr.language-hugo-vscode

ただ、`{{`や`}}`の色がねえ。真っ赤でちとキツい。そして拡張自体には色を替える設定はない。

![Hugo拡張のシンタックスハイライトのデフォルト色](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4090168/1d095a12-33a1-4e43-a48f-55a363d6214c.png)

## ハイライトの色の替え方

1. 上で紹介したHugo拡張 [Hugo Language and Syntax Support](https://marketplace.visualstudio.com/items?itemName=budparr.language-hugo-vscode) をインストール
2. [VSCodeの設定ファイル](https://qiita.com/y-w/items/614843b259c04bb91495)（`settings.json`）に、以下のコードブロックの内容をコピペ

```json

"editor.tokenColorCustomizations": {
  "textMateRules": [
    {
      "scope": [
        "punctuation.section.embedded.begin.hugo",
        "punctuation.section.embedded.end.hugo"
      ],
      "settings": {
        "foreground": "#b58900"
      }
    }
  ]
}

```

**スコープ（scope）**って奴を特定して、`foreground`で色を指定しています。

`{{`のスコープの調べ方は、`{{`にカーソルを置いておき、コマンドパレット（`Ctrl + Shift + P`）に「> 開発者: エディタートークンとスコープの検査」と入れて、出てきた候補をクリック。すると、以下のようなボックスが現れ、下の方にスコープが記載されています。

![スコープが調べられるボックス](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4090168/b2a65d69-36c5-4aef-a383-b1cb1e76429c.png)

`{{`と`}}`に関しては、別々のスコープが割り当てられているので、先のコードでは`scope`の値を２つ指定しています。

👇設定が成功すれば、`{{`と`}}`の色味が変わるはず（スクショだと分かりにくいかな？）。

![色の設定後](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4090168/00e23615-961d-4650-a62f-831c3361d3cb.png)

### 注意点と補足

🚨設定ファイル`settings.json`で設定した色などの設定は、**テーマを変更しても替わりません**。そのつど、手動で設定し直す必要があります（見た目に支障がないなら、そのままでも良いわけですが）。

🎨使用中のテーマ [Solarized](https://github.com/ryanolsonx/vscode-solarized-theme)と色味を揃えたかったので、GPTに「このリンク先から、テーマの使用色を抜き出して」と頼んだら、色のリストを作ってもらえました。

### コメントアウトのハイライトも微修正

先の`{{`と`}}`の修正に、Hugoコメントアウト`{{ /*...*/ }}`の色味修正も加えてみましょう。`fontStyle: "italic"`の指定も加え、斜体になるようにしています。

```json

"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"
      }
    }
  ]
}

```

👇こんな風に、設定が成功すれば表示されますよ✨

![コメントアウトのハイライトの修正後](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4090168/722df598-53b7-49c6-aba0-e3aefac088bd.png)


## ついでに"ショートコード"もハイライトします？

先のHugo拡張だと、ショートコード（Markdownで記事を書くときに、リッチなブロックを色々挿入するのに使える）は、ハイライトされません。

ま、それが気になって仕方がないという奇特な人は（Hugoなんか使っている少数派の中でも）少数でしょうけど、いちおうの解決策はこちら👇

https://marketplace.visualstudio.com/items?itemName=fabiospampinato.vscode-highlight

1. いちばん最初に、VSCodeの`settings.json`に、以下のコードブロックの内容をコピペして下さい
2. その次に、拡張[Highlight](https://marketplace.visualstudio.com/items?itemName=fabiospampinato.vscode-highlight)をVSCodeにインストールしましょう

```json

"highlight.regexes": {
  "(?<=\\{\\{\\<\\s)(.*?)(?=\\s\\>\\}\\})": {
    "filterFileRegex": ".*\\.md$",
    "decorations": [
      {
        "color": "#b58900"
      }
    ]
  }
}

```

👆`(?<=\\{\\{\\<\\s)(.*?)(?=\\s\\>\\}\\})`という呪文めいたところが**正規表現**と呼ばれるものです。

色を替えたい時は、`settings.json`の、`color`の値を変更します。背景色（`background-color`）、文字の太さ（`font-weight`）、斜体（`font-style`）も設定可能。

👇こんな風に、記事の中のショートコード`{{< ... >}}`がハイライトされれば、正常に動作しています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4090168/89994ef2-8ea4-4798-8ff3-333a4163484b.png)

## "Go Template"は使えん
以下は失敗の記録。完全に蛇足だから読まなくて良いよ。

「Hugoの拡張は色がイマイチだからなあ～」とChatGPTに言ったら、GTPめが最初に推してきたのが、このGo Templeteの拡張。ところが、こいつを入れて`.html`に適用させると、めでたくHugoの構文には色が付くものの、**HTMLのシンタックスハイライトは効かなくなる**んである。それじゃあ意味がないだろう!!（少なくとも私にとっては）

https://marketplace.visualstudio.com/items?itemName=romantomjak.go-template

その後、「`{{ ... }}`にハイライトが当たるように、Highlight拡張を入れて、正規表現で指定すればいいんじゃん」と（私が）思いつき、でも正規表現なんか忘れちまってるから、「GPTに丸投げしてコピペすればいいや～」と思ったら。

なんとGTP君、思いのほか正規表現が苦手!!

いやまあ、「`{{ ... }}`の全部がハイライトされると格好悪いから、せめて{{ `...` }}って風に、中だけ色を付けたい」とか、注文をつけた私も悪かったのかもしれないが。

すぐ人のせいにすんだよGTP。「この拡張機能は正規表現の扱いが特殊なんすよ」とか。特殊って分かってんなら、それに合わせて代案を出せよ。なんで**今度こそ完璧な解答です**って言って、たった２種類の解答をループし続けるんだ？ 私が、あやふやな知識で修正を試みて正解を導くと、「さすが!!　まるでプロ!!　試行錯誤の天才!!　あなたの苦労はきっと財産になる」みたいな言葉を、やたら長々と並べ立てる。**おまえ、そのスペック、もっと有益なこと（正解を探すとか）に振り向けられないの??**

しかも結局さ、ふと私に疑問が生まれてさ、「Hugoの拡張機能って、本当にハイライトの色を替えられないの？」って質問を、GTPに投げてみたの。そしたらよ、「拡張の設定からは替えられないけど、VSCode本体側の設定から替える手はあるよ～」って。

おいおいおい!! それ、Go Templateを推す前に、正規表現の沼にはまる前に、教えてくれよ!!!!

そして、へたくそな正規表現の指定でベターっと色変えるよりも、Hugoの拡張でハイライトされた色を微修正する方が、（いくらかは）見た目が良くなった😭

👇（これは、Highlightでベターっと色替えしたやつ）

![Highlightの設定が反映されたHugoテンプレート](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4090168/a70af21b-6d24-4807-a5d6-9f70c2f47dca.png)

ま、Highlightも、ショートコードの色付けには活かせているから、結果オーライってことで良いんだけどさ……。

## 終わりの言葉

GTPよ。今回も（最後の最後には）助けてくれてありがとう。でもさ。

- もっと正規表現を勉強しよう（基本中の基本だろ。AIのくせに）
- 質問者をおだてたり、他のツールを悪者にする前に、まず自分が「わかってない」現状を認めろ

まあ、**質問者がポンコツだと、AIも限りなくポンコツに寄せてくる**という、悲しい現実を目の当たりにしただけではありますが。

そしてこの記事も、どうせ一部だけ切り取られて**AIの肥やし**になるんだろ？ いいよもう。好きにして呉れ給へ。