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

Question

使用 Pygments 和 Hugo，我可以像这样用块做语法高亮显示：

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

这 "works" 代码是彩色的，但颜色不好，白色背景（来自 Hugo 主题）上有白色文本（来自 Pygments）。有没有办法改变突出显示的主题？

Answer 1

只需从 https://github.com/richleland/pygments-css 中选择主题并适应您的 CSS。以下是我的 SCSS 文件中我的 Hugo 站点的样式供您参考（评论在特定行下）：

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 */
}

我建议使用高亮颜色代码的插件，例如 Color Highlighter for Sublime。

Answer 2

在 /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
}

并将参考 link 添加到 /themes/hyde/layouts/partials/head.html

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

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

Hugo + Pygments—How to change highlighting theme?

pygments

hugo