代碼塊渲染鉤子

Markdown

此 Markdown 示例包含一個圍欄代碼塊：

```bash {class="my-class" id="my-codeblock" lineNos=inline tabWidth=2}
declare a=1
echo "$a"
exit
```

圍欄代碼塊由以下部分組成：

• 一個前導 代碼圍欄
• 一個可選的 信息字符串
• 一個代碼示例
• 一個尾隨代碼圍欄

在前面的示例中，信息字符串包含：

• 代碼示例的語言（第一個單詞）
• 一個可選的空格分隔或逗號分隔的屬性列表（大括號內的所有內容）

信息字符串中的屬性可以是通用屬性或高亮選項。

在上面的示例中，通用屬性 是 class 和 id。在代碼塊渲染鉤子中沒有特殊處理的情況下，Hugo 會將每個通用屬性添加到圍繞渲染代碼塊的 HTML 元素中。與其內容安全模型一致，Hugo 會刪除 HTML 事件屬性，如 onclick 和 onmouseover。通用屬性通常是全局 HTML 屬性，但您也可以包含自定義屬性。

在上面的示例中，高亮選項 是 lineNos 和 tabWidth。Hugo 使用 Chroma 語法高亮器來渲染代碼示例。您可以通過指定一個或多個 高亮選項 來控制渲染代碼的外觀。

上下文

代碼塊_渲染鉤子_ 模板接收以下 上下文：

Attributes

(map) 來自信息字符串的通用屬性。

Inner

(string) 前導和尾隨代碼圍欄之間的內容，不包括信息字符串。

Options

(map) 來自信息字符串的高亮選項。如果 Type 是空字符串或 Chroma 語法高亮器不支持的代碼語言，則此映射為空。但是，在這種情況下，高亮選項可在 Attributes 映射中使用。

Ordinal

(int) 頁面上代碼塊的從零開始的序號。

Page

(page) 對當前頁面的引用。

PageInner

(page) 對通過 RenderShortcodes 方法嵌套的頁面的引用。詳見。

Position

(text.Position) 代碼塊在頁面內容中的位置。

Type

(string) 信息字符串的第一個單詞，通常是代碼語言。

示例

在默認配置中，Hugo 通過將代碼示例傳遞給 Chroma 語法高亮器並包裹結果來渲染圍欄代碼塊。要創建執行相同操作的渲染鉤子：

{{ $result := transform.HighlightCodeBlock . }}
{{ $result.Wrapped }}

雖然您可以使用一個帶有條件邏輯的模板來控制每種語言的行為，但您也可以創建特定於語言的模板。

layouts/
  └── _markup/
      ├── render-codeblock-mermaid.html
      ├── render-codeblock-python.html
      └── render-codeblock.html

例如，要創建代碼塊渲染鉤子來渲染 Mermaid 圖表：

<pre class="mermaid">
  {{ .Inner | htmlEscape | safeHTML }}
</pre>
{{ .Page.Store.Set "hasMermaid" true }}

然後在您的基礎模板的 底部（在閉合 body 標簽之前）包含此代碼片段：

{{ if .Store.Get "hasMermaid" }}
  <script type="module">
    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
    mermaid.initialize({ startOnLoad: true });
  </script>
{{ end }}

有關詳細信息，請參閱 圖表 頁面。

嵌入式

Hugo 包含一個 嵌入式代碼塊渲染鉤子 來渲染 GoAT 圖表。

PageInner 詳情

PageInner 的主要用途是相對於包含的 Page 解析鏈接和 頁面資源。例如，創建一個 “include” 短代碼，從多個內容文件組合頁面，同時保留腳注和目錄的全局上下文：

{{ with .Get 0 }}
  {{ with $.Page.GetPage . }}
    {{- .RenderShortcodes }}
  {{ else }}
    {{ errorf "短代碼 %q 無法找到 %q。參見 %s" $.Name . $.Position }}
  {{ end }}
{{ else }}
  {{ errorf "短代碼 %q 需要一個位置參數來指示要包含的文件的邏輯路徑。參見 %s" .Name .Position }}
{{ end }}

然後在您的 Markdown 中調用短代碼：

{{% include "/posts/post-2" %}}

在渲染 /posts/post-2 時觸發的任何渲染鉤子將獲得：

• 調用 Page 時獲得 /posts/post-1
• 調用 PageInner 時獲得 /posts/post-2

如果不相關，PageInner 會回退到 Page 的值，並且始終返回一個值。

作為實際示例，Hugo 的嵌入式鏈接和圖像渲染鉤子使用 PageInner 方法來解析 Markdown 鏈接和圖像目標。請參閱各自的源代碼：

• 嵌入式鏈接渲染鉤子
• 嵌入式圖像渲染鉤子