Hugo No-JS 语法高亮与 highlight.js 或 prism.js

【问题标题】：Hugo No-JS Syntax Highlight with highlight.js or prism.jsHugo No-JS 语法高亮与 highlight.js 或 prism.js
【发布时间】：2019-12-13 13:00:19
【问题描述】：

我需要在 Hugo 中突出显示语法。目前使用highlight.js。我喜欢最终的外观，但不喜欢它的工作原理。它使用 javascript 来运行词法分析器并应用样式。相反，我想在 Hugo 构建阶段运行词法分析器，以便网站不使用 javascript。实际上，我想缩短页面加载时间，并消除运行 JS 和应用样式所需的“闪烁”效果。接受建议。谢谢，鲁本

【问题讨论】：

标签： syntax-highlighting hugo static-site highlight.js prism.js

【解决方案1】：

Hugo 使用chroma 作为编译时语法高亮显示，因此您不需要在 Hugo 中使用 Highlight.js。

From the Hugo page on syntax highlighting:

Hugo 带有来自 Chroma 的非常快速的语法突出显示。 Hugo 使用 Chroma 作为代码高亮工具；它是用 Go 构建的，而且速度非常非常快——而且最重要的部分与我们之前使用的 Pygments 兼容。

您可以为整个站点或每个代码块设置许多样式选项（查看chroma library）。

toml 中的default highlight configuration 是：

[markup]
  [markup.highlight]
    codeFences = true
    hl_Lines = ""
    lineNoStart = 1
    lineNos = false
    lineNumbersInTable = true
    noClasses = true
    style = "monokai"
    tabWidth = 4

【讨论】：