Hugo + Pygments——如何更改高亮主题？

Question

使用Pygments和Hugo一起，我可以像这样使用块进行语法高亮：

```ruby
def hello object
  puts "Hello, #{object}"
end
```

这段代码的颜色是可以被突出显示的，但是颜色并不好看，因为Pygments设置的白色字体与Hugo主题设定的白色背景相同。有没有一种方法可以更改高亮显示的主题呢？

- Mirror318

---

我不使用Hugo，但是Pygments着色通常由样式表处理。检查一些代码的不同部分，你会看到哪些类需要进行样式设置。 - Jorge Israel Peña

Answer 1

在 /config.toml 文件中需要添加以下这些行：

PygmentsCodeFences = true
PygmentsStyle = "monokai"

想获取代码样式列表，可以参考 https://help.farbox.com/pygments.html。我认为还有更多的样式可用，但我还没有找到一个全面的列表。

至于代码块的背景，实际上是由Hugo主题设置的，在我使用的Hyde主题中，我需要像这样覆盖CSS：

/themes/hyde/static/css/override.css

pre {
  background-color: #23241f;
}
code {
  background-color: #EEE
}

并在/themes/hyde/layouts/partials/head.html中添加引用链接。

<link rel="stylesheet" href="{{ .Site.BaseURL }}css/override.css">

- Mirror318

Answer 2

只需从https://github.com/richleland/pygments-css中选择主题并在您的CSS上进行调整。以下是我Hugo网站的样式，来自我的SCSS文件供您参考（注释位于特定行下）：

pre {
    overflow: auto;
    display: block;
    position: relative;
    // word-break: break-all;
    // word-wrap: break-word;
    // white-space: pre-wrap;
    @include font-stack-code;
    // padding: 1rem 1rem 2rem;
    // border: $border;
    font-size: 0.75em;
    //background-color: #fafafa;
    color: #fff;
    background-color: #333;
    .hll {
            background-color: #49483e;
    }
    .c {
            color: #75715e;
    }
    /* Comment */
    .err {
            color: #960050;
            background-color: #1e0010;
    }
    /* Error */
    .k {
            color: #66d9ef;
    }
    /* Keyword */
    .l {
            color: #ae81ff;
    }
    /* Literal */
    .n {
            color: #f8f8f2;
    }
    /* Name */
    .o {
            color: #f92672;
    }
    /* Operator */
    .p {
            color: #f8f8f2;
    }
    /* Punctuation */
    .cm {
            color: #75715e;
    }
    /* Comment.Multiline */
    .cp {
            color: #75715e;
    }
    /* Comment.Preproc */
    .c1 {
            color: #75715e;
    }
    /* Comment.Single */
    .cs {
            color: #75715e;
    }
    /* Comment.Special */
    .ge {
            font-style: italic;
    }
    /* Generic.Emph */
    .gs {
            font-weight: bold;
    }
    /* Generic.Strong */
    .kc {
            color: #66d9ef;
    }
    /* Keyword.Constant */
    .kd {
            color: #66d9ef;
    }
    /* Keyword.Declaration */
    .kn {
            color: #f92672;
    }
    /* Keyword.Namespace */
    .kp {
            color: #66d9ef;
    }
    /* Keyword.Pseudo */
    .kr {
            color: #66d9ef;
    }
    /* Keyword.Reserved */
    .kt {
            color: #66d9ef;
    }
    /* Keyword.Type */
    .ld {
            color: #e6db74;
    }
    /* Literal.Date */
    .m {
            color: #ae81ff;
    }
    /* Literal.Number */
    .s {
            color: #e6db74;
    }
    /* Literal.String */
    .na {
            color: #a6e22e;
    }
    /* Name.Attribute */
    .nb {
            color: #f8f8f2;
    }
    /* Name.Builtin */
    .nc {
            color: #a6e22e;
    }
    /* Name.Class */
    .no {
            color: #66d9ef;
    }
    /* Name.Constant */
    .nd {
            color: #a6e22e;
    }
    /* Name.Decorator */
    .ni {
            color: #f8f8f2;
    }
    /* Name.Entity */
    .ne {
            color: #a6e22e;
    }
    /* Name.Exception */
    .nf {
            color: #a6e22e;
    }
    /* Name.Function */
    .nl {
            color: #f8f8f2;
    }
    /* Name.Label */
    .nn {
            color: #f8f8f2;
    }
    /* Name.Namespace */
    .nx {
            color: #a6e22e;
    }
    /* Name.Other */
    .py {
            color: #f8f8f2;
    }
    /* Name.Property */
    .nt {
            color: #f92672;
    }
    /* Name.Tag */
    .nv {
            color: #f8f8f2;
    }
    /* Name.Variable */
    .ow {
            color: #f92672;
    }
    /* Operator.Word */
    .w {
            color: #f8f8f2;
    }
    /* Text.Whitespace */
    .mf {
            color: #ae81ff;
    }
    /* Literal.Number.Float */
    .mh {
            color: #ae81ff;
    }
    /* Literal.Number.Hex */
    .mi {
            color: #ae81ff;
    }
    /* Literal.Number.Integer */
    .mo {
            color: #ae81ff;
    }
    /* Literal.Number.Oct */
    .sb {
            color: #e6db74;
    }
    /* Literal.String.Backtick */
    .sc {
            color: #e6db74;
    }
    /* Literal.String.Char */
    .sd {
            color: #e6db74;
    }
    /* Literal.String.Doc */
    .s2 {
            color: #e6db74;
    }
    /* Literal.String.Double */
    .se {
            color: #ae81ff;
    }
    /* Literal.String.Escape */
    .sh {
            color: #e6db74;
    }
    /* Literal.String.Heredoc */
    .si {
            color: #e6db74;
    }
    /* Literal.String.Interpol */
    .sx {
            color: #e6db74;
    }
    /* Literal.String.Other */
    .sr {
            color: #e6db74;
    }
    /* Literal.String.Regex */
    .s1 {
            color: #e6db74;
    }
    /* Literal.String.Single */
    .ss {
            color: #e6db74;
    }
    /* Literal.String.Symbol */
    .bp {
            color: #f8f8f2;
    }
    /* Name.Builtin.Pseudo */
    .vc {
            color: #f8f8f2;
    }
    /* Name.Variable.Class */
    .vg {
            color: #f8f8f2;
    }
    /* Name.Variable.Global */
    .vi {
            color: #f8f8f2;
    }
    /* Name.Variable.Instance */
    .il {
            color: #ae81ff;
    }
    /* Literal.Number.Integer.Long */
    .gh {}
    /* Generic Heading & Diff Header */
    .gu {
            color: #75715e;
    }
    /* Generic.Subheading & Diff Unified/Comment? */
    .gd {
            color: #f92672;
    }
    /* Generic.Deleted & Diff Deleted */
    .gi {
            color: #a6e22e;
    }
    /* Generic.Inserted & Diff Inserted */
}

我建议使用一个插件来突出显示颜色代码，例如Sublime的Color Highlighter。

- revelt