Hugo 內建的 Syntax Highlight - Chroma
Hugo 提供了一個內建的語法高亮工具，基於 Chroma，它是一個用 Go 語言編寫的語法高亮庫。Hugo 可以自動處理程式碼塊的語法高亮，並且內建支援許多語言和樣式。
- 是 Go 語言 Chroma 套件完成的
- 在你使用 hugo 將 markdown 轉成 html 時，就完成語法高量了，所以是在 server 端進行。
Highlight.js
是一個純 JavaScript 編寫的語法高亮庫，廣泛用於網頁中，支持大量程式語言和顏色樣式。
- highlight.js 是 javascript 語法，當整個 html 頁面載入後，在 client 端完成渲染。
- 他會搜尋 pre code 元素，完成顏色渲染。
可參考這篇 - 使用 highlight.js 就可以載入成功。
refs:
比較總結
| 特徵 |
Hugo 內建語法高亮 |
Highlight.js |
| 實現方式 |
服務端渲染（靜態生成 HTML） |
瀏覽器端處理（JavaScript） |
| 性能 |
較快，無需依賴外部資源 |
較慢，依賴外部 JavaScript 和 CSS 加載 |
| 語言支持 |
支援多種語言，但較為有限 |
支援超過 180 種語言，靈活可擴展 |
| 樣式選擇 |
多種內建樣式可選 |
提供豐富的樣式選擇，可根據需求選擇特定主題 |
| SEO 友好性 |
高，因為高亮是服務端渲染的 |
低，因為高亮是瀏覽器端處理的，搜尋引擎無法讀取高亮結果 |
| 配置複雜度 |
配置簡單，無需引入外部資源 |
需要手動引入外部庫，並配置相關的 JavaScript 和 CSS |
| 互動性 |
無 |
可以動態切換主題或語言，提供更多的互動性 |
結論
- Hugo 內建語法高亮 適合於靜態網站，提供快速、簡單且高效的語法高亮，對 SEO 友好，且配置簡單。適合需要快速構建靜態網站，並且不需要太多動態效果的情境。
- Highlight.js 更加靈活，適合需要高度自定義、動態處理程式碼高亮的網站。若需要豐富的語言支持或互動性，可以選擇這個庫，但需要注意性能和加載時間的影響。
Hugo 自帶 Syntax Highlight 工具，但我更傾向於使用 Highlight.js 來實現，因為
- 許多網站使用，支援更多語言與更多主題樣式，其中我很喜歡他的 night-owl 這個樣式用在 C 語言的效果。
- 相比於 GO 語言，我更想使用 javascript，且目前 GO Chroma 直接產生出靜態檔案，將樣式都寫死在 element 中，不方便調整，更何況也找不到如何客製調整，換句話說，我無法進行任何 style 控制，只能選用為數不多的現成主題。
- 而 highlight.js 則是動態在 client 端渲染，由指定載入的 css 跟 js 檔案來控制，只要引入不同的樣式，就可以動態更改，若他眾多樣式我都不喜歡，我也可以去下載 css 並自行調整樣式設定，即可套用我自定義的樣式。