hugo Papermod 代码染色问题

我在使用hugo papermod制作静态个人网站的时候，发现我的代码模块染色很奇怪，搜遍了网上都没解决问题

我在这些地方做了更改
config.yml 文件


```css
params:
    assets: 
      disableHLJS: false 

markup:
  highlight:
    # anchorLineNos: true
    codeFences: true
    guessSyntax: true
    # lineNos: true
    noClasses: true
    tabWidth: 4
    style: monokai


然后我的bank.css是这样的：

```css
:root {
    --footer-height: 40px;
    /*--content-gap: 20px;*/
    /*--content: rgb(80, 80, 80);*/
    /*--hljs-bg: rgb(35, 35, 35);*/
    --hljs-bg: #282C34 
    /*rgb(44, 44, 44);*/
    /*--code-bg: rgb(235, 235, 235);*/
    --code-bg: rgb(240, 240, 240);
    --code-bg-border: rgb(200, 200, 200);
    --black: rgb(0, 0, 0);
    --white: rgb(255, 255, 255);
    --tag: rgb(235, 235, 235);

    --nav-width: 1300px;
    /*--nav-width: 1024px;*/
    --article-width: 650px;
    --toc-width: 300px;

    --nav-width: 1300px;
    /*--nav-width: 1024px;*/
    --article-width: 650px;
    --toc-width: 300px;
}

.dark {
    --hljs-bg: #272b33;
    /*--code-bg: rgba(175, 184, 193, 0.2);*/
}
和

.post-content {
    font-family:MaShanZheng-Regular, Code New Roman,sans-serif;
}


.dark .post-content {
      color: rgba(255, 255, 255, 0.9);
}

body {
    font-size: 18px;
    line-height: 1.6;
    font-family:MaShanZheng-Regular, Code New Roman,sans-serif;
}

然后我的post-single.css部分我修改了这个代码

.post-content pre code {
    display: block;
    margin: auto 0;
    padding: 10px;
    color: rgb(213, 213, 214);
    background: var(--hljs-bg) !important;
    border-radius: var(--radius);
    overflow-x: auto;
    word-break: break-all;

最后的结果是这样的，就很奇怪

想问问看到底出现了什么问题。

参考GPT和自己的思路：

根据您提供的信息，看起来您正在使用 "hugo Papermod" 模板来创建自己的个人网站，并且您在代码块的样式方面遇到了问题。

从您的配置文件和 CSS 样式文件中的代码来看，您尝试使用 "highlight.js" 库，并通过 "style" 属性将其样式设置为 "monokai"。此外，您还尝试在自己的样式文件中覆盖默认的颜色和字体样式。

但是，根据您提供的图片，似乎代码块的背景颜色和字体样式并没有按照您的预期进行更改。

有几个可能的原因：

您的 CSS 样式文件没有正确加载。请确保您的样式文件的路径和名称是正确的，并且在 HTML 文件中正确地链接到该文件。
样式冲突。可能有其他 CSS 样式规则正在覆盖您的样式。您可以在浏览器开发者工具中检查元素样式并查看是否存在任何 CSS 冲突。
"highlight.js" 库未正确安装。请确保您已正确安装了 "highlight.js" 库并在 HTML 文件中正确地链接到该库。

如果您排除这些问题仍无法解决问题，建议您在 "hugo Papermod" 的 GitHub 页面上寻求帮助或咨询相关论坛或社区。

该回答引用GPTᴼᴾᴱᴺᴬᴵ
根据你提供的信息，可能有以下几个问题导致代码高亮不正确：

1.缺少 highlight.js 库
在 Hugo Papermod 主题中，代码高亮功能需要使用 highlight.js 库。你需要在 config.yml 中设置 params.assets.disableHLJS 为 false 来启用它。然后，在你的 layouts/_default/baseof.html 文件中，你需要确保在标签中包含以下代码：

{{ $assets := resources.Get "js/bundle.js" }}
{{ $assets := $assets.Concat (resources.Get "js/hljs/highlight.pack.js") }}
{{ $assets := $assets.Concat (resources.Get "js/main.js") }}
{{- $assets.RelPermalink | script -}}

2.CSS 样式问题
检查一下你的 CSS 样式是否与 Papermod 主题自带的样式冲突。你可以将你的样式表和主题自带的样式表分别加载，并通过浏览器开发者工具查看相应元素的 CSS 样式。

3.代码块中的语言设置不正确
在 Hugo Papermod 主题中，语言的设置需要通过在代码块的开头使用类似 lang="python" 的方式进行设置。如果语言设置不正确，highlight.js 可能无法正确解析代码。例如：

```python
def hello():
    print("Hello, world!")

如果你的问题还没有得到解决，可以提供更详细的信息，比如你的代码块样式表和代码块的 HTML 结构，以便更好地帮助你解决问题。