雨果，可折叠的代码块与渲染钩子可能吗?

Question

我想创建一个可折叠的代码部分(用于使用jupyter笔记本创建的标记)，类似于jupyter-book使用单元格标签(例如"hide-input")https://jupyterbook.org/en/stable/interactive/hiding.html)

根据DevShark在这篇博文中的回答，可折叠部分可以通过以下短代码插入:

在/layouts/shortcodes/details.html

中创建短代码

<details>
<summary>{{ (.Get 0) | markdownify }}</summary>
{{ .Inner | markdownify }}
</details>

这个短代码可以在内容文件中使用，以markdown的方式，如下所示:

{{< details >}}
Collapsed text
{{< /details >}}

我想知道是否可以使用代码块的渲染钩子来实现相同的行为。

我尝试在./layouts/_default/_markup/render-codeblock.html

中使用以下代码片段

<details>
{{ .Inner | markdownify }}
</details>

但是，可以展开代码块，但语法高亮不起作用。

任何想法如何我可以获得可折叠的代码块在html导出与语法高亮?

Answer 1

确实可以修改render-codeblock.html。在Hugo中使用Chroma执行语法高亮，如下所示:

<pre>
<code>{{ highlight .Inner .Type }}</code>
</pre>

你可以通过添加元素/类来添加你想要的行为。查看更多:https://gohugo.io/functions/highlight/