Hugo 語法高亮

Hugo 提供多種方法為代碼示例添加語法高亮：

• 在模板中使用 transform.Highlight 函數
• 使用 highlight shortcode 與任何 content format
• 使用 Markdown 內容格式的圍欄代碼塊

圍欄代碼塊

在默認配置中，Hugo 高亮圍欄代碼塊內的代碼示例，格式如下：

```LANG [OPTIONS]
CODE
```

CODE

要高亮的代碼。

LANG

要高亮的代碼語言。從 supported languages 中選擇一個。此值不區分大小寫。

OPTIONS

一個或多個空格分隔或逗號分隔的鍵值對，包裹在花括號中。在 site configuration 中為每個選項設置默認值。鍵名不區分大小寫。

例如，使用此 Markdown：

```go {linenos=inline hl_lines=[3,"6-8"] style=emacs}
package main

import "fmt"

func main() {
    for i := 0; i < 3; i++ {
        fmt.Println("Value of i:", i)
    }
}
```

Hugo 渲染這個：

1package main
2
3import "fmt"
4
5func main() {
6    for i := 0; i < 3; i++ {
7        fmt.Println("Value of i:", i)
8    }
9}

選項

anchorLineNos

(bool) 是否將每個行號渲染為 HTML 錨元素，將周圍 span 元素的 id 屬性設置為行號。如果 lineNos 為 false，則此選項無關。默認為 false。

codeFences

(bool) 是否高亮代碼圍欄。默認為 true。

guessSyntax

(bool) 如果 LANG 參數為空或設置為沒有相應 詞法分析器 的語言，是否自動檢測語言。如果無法自動檢測語言，則回退到純文本詞法分析器。默認為 false。

Chroma 語法高亮器包含約 250 種語言的詞法分析器，但其中只有 5 種實現了自動語言檢測。

hl_Lines

(string) 要在高亮代碼中強調的行的空格分隔列表。要強調第 2、3、4 和 7 行，將此值設置為 2-4 7。此選項獨立於 lineNoStart 選項。

hl_inline

(bool) 是否在沒有包裝容器的情況下渲染高亮代碼。默認為 false。

lineAnchors

(string) 在將行號渲染為 HTML 錨元素時，將此值前置到周圍 span 元素的 id 屬性。當頁面包含兩個或更多代碼塊時，這提供了唯一的 id 屬性。如果 lineNos 或 anchorLineNos 為 false，則此選項無關。

lineNoStart

(int) 在第一行顯示的數字。如果 lineNos 為 false，則此選項無關。默認為 1。

lineNos

(any) 控制行號顯示。默認為 false。

• true：啟用行號，由 lineNumbersInTable 控制。
• false：禁用行號。
• inline：啟用內聯行號（將 lineNumbersInTable 設置為 false）。
• table：啟用基於表格的行號（將 lineNumbersInTable 設置為 true）。

lineNumbersInTable

(bool) 是否在 HTML 表格中渲染高亮代碼，包含兩個單元格。左表格單元格包含行號，右表格單元格包含代碼。如果 lineNos 為 false，則此選項無關。默認為 true。

noClasses

(bool) 是否使用內聯 CSS 樣式而不是外部 CSS 文件。默認為 true。要使用外部 CSS 文件，將此值設置為 false 並從命令行生成 CSS 文件：

hugo gen chromastyles --style=monokai > syntax.css

style

(string) 應用於高亮代碼的 CSS 樣式。區分大小寫。默認為 monokai。請參閱 語法高亮樣式。

tabWidth

(int) 用此數量的空格替換高亮代碼中的每個制表符。如果 noClasses 為 false，則此選項無關。默認為 4。

wrapperClass

New in v0.140.2

(string) 用於高亮代碼最外層元素的類。默認為 highlight。

轉義

記錄 shortcode 用法時，轉義標簽分隔符：

```text {linenos=inline}
{{</* shortcode-1 */>}}

{{%/* shortcode-2 */%}}
```

Hugo 渲染這個：

1{{< shortcode-1 >}}
2
3{{% shortcode-2 %}}

語言

以下是支持的語言。在指定語言時使用以下標識符之一，而不是語言名稱：

• transform.Highlight 函數
• highlight shortcode
• 圍欄代碼塊