更改 Hugo 主题中的代码块突出显示

Posted 2023-03-30

【中文标题】更改 Hugo 主题中的代码块突出显示

【英文标题】：Change code chunk highlighting in Hugo theme

【发布时间】：2020-02-11 12:08:01

【问题描述】：

我正在尝试更改 Hugo 主题（“Call me Sam”）中代码块的语法突出显示。我使用 R 的blogdown 渲染内容，所以代码块在Rmarkdown 中。在我的config.toml 上，我有pygmentsStyle = "monokai" 和pygmentsCodefences = true。按照这个说明https://gohugo.io/getting-started/configuration-markup/，我也添加了这个（也许我的目标不是关于标记）：

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

我的页面代码块没有任何变化。我想我也需要更改css 文件（哪个？？）？

感谢您的帮助！

【参考方案1】：

如果您使用代码围栏，请尝试使用 Hugo 内置的highlight shortcode，例如：

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

我经常遇到 Hugo 的代码围栏高亮问题，但很少遇到 Hugo 的内置高亮短代码问题。单击“单击此”详细信息后，您可以在 https://www.ii.com/ordinary-extraordinary-markdown/#this-articles-markdown-flavor 处看到突出显示短代码的结果示例（这是我的网站 :-)）。

【讨论】：

你把这段代码放在哪里？输入toml 或其他地方？

你的问题让我怀疑我是否理解你原来的问题。您是否尝试在 1) 在您发布的站点中出现时在 content/ 目录中的写作中突出代码块，或者 2) 在您编辑任何文件（例如，layouts/ 目录中的模板时）在您的文本编辑器中突出显示代码块？如果您要询问＃1，请将我在上面发布的片段放入您的内容文件中，例如不管.Rmd.[^] 如果你问的是#2，你可能想在你的文本编辑器中打开“语法高亮”。 [^] .Rmd 可以是任何file extension Hugo knows about

PS - 我不知道高亮短代码是否在 .Rmd 文件中有效，所以当您尝试这个时，我建议您首先尝试在 .md 文件中使用高亮短代码。希望能帮助你理解 Hugo 的语法高亮！

我对 .Rmd 文件中的短代码很好奇，所以做了一些搜索，发现“代码块”这个短语在 R 世界中具有特殊的含义。所以现在我很确定我不明白你原来的问题。我希望来自 blogdown 和 R 世界的人可以提供帮助。 --nm 对 blogdown 和 R 几乎一无所知（但几年前我第一次学习 Hugo 时就尝试过它们）