Hugo能否通过渲染钩子实现带语法高亮的可折叠代码块？

可以通过代码块渲染钩子实现和短代码一致的折叠效果，语法高亮失效的核心原因是之前的自定义模板直接将原始代码内容交给markdownify渲染，跳过了Hugo内置的语法高亮处理流程。

实现步骤 #

• 不要全局覆写代码块渲染逻辑，通过代码块属性识别需要折叠的代码块，不影响普通代码块渲染，同时可兼容Jupyter Notebook导出的hide-input类单元格标签。
• 模板中必须调用Hugo内置的highlight函数处理代码内容，保证走和默认代码块完全一致的Chroma语法高亮流程，不会丢失高亮效果。

1. 编写渲染钩子模板 #

在路径./layouts/_default/_markup/render-codeblock.html写入如下模板代码：

{{/* 识别collapsible或hide-input属性，判定为需要折叠的代码块 */}}
{{ if or .Attributes.collapsible .Attributes.hide-input }}
{{ $summaryText := .Attributes.summary | default "点击展开/折叠代码" }}
<details class="collapsible-code-block">
  <summary>{{ $summaryText }}</summary>
  {{/* 调用内置高亮函数，参数与默认代码块渲染逻辑完全一致 */}}
  {{ highlight .Inner .Type .Options }}
</details>
{{ else }}
{{/* 普通代码块走默认高亮渲染 */}}
  {{ highlight .Inner .Type .Options }}
{{ end }}

2. Markdown调用方式 #

给需要折叠的代码块加上对应属性即可，自动保留原有语法高亮：

```python {hide-input summary="点击查看示例代码"}
import pandas as pd

df = pd.read_csv("test.csv")
print(df.head())
```

3. 可选样式优化 #

添加自定义CSS可以让折叠交互样式更美观，对齐Jupyter Book的视觉效果：

.collapsible-code-block {
  margin: 1rem 0;
  border: 1px solid #e2e8f0;
  border-radius: 0.375rem;
  overflow: hidden;
}
.collapsible-code-block summary {
  padding: 0.5rem 1rem;
  background-color: #f8fafc;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.collapsible-code-block summary::before {
  content: "▶ ";
  font-size: 0.75rem;
  transition: transform 0.2s ease;
  display: inline-block;
}
.collapsible-code-block[open] summary::before {
  transform: rotate(90deg);
}
.collapsible-code-block summary::-webkit-details-marker {
  display: none;
}
.collapsible-code-block .highlight {
  margin: 0;
  border-radius: 0;
}

原有方案问题说明 #

之前自定义模板用{{ .Inner | markdownify }}渲染内容，相当于把原始代码当普通Markdown文本解析，Chroma语法高亮引擎没有接收到代码内容、语言类型和高亮配置，自然无法生成带高亮样式的代码块。

内容的提问来源于stack exchange，提问作者Moritz