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

【问题标题】：Hugo + Pygments—How to change highlighting theme?Hugo + Pygments——如何改变高亮主题？
【发布时间】：2016-12-13 18:20:37
【问题描述】：

将 Pygments 与 Hugo 结合使用，我可以使用以下块进行语法高亮：

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

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

【问题讨论】：

我不使用 hugo 但 pygments 着色通常由样式表处理。检查某些代码的不同部分，您会看到要设置哪些类。

标签： pygments hugo

【解决方案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">

【讨论】：

【解决方案2】：

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

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 用于 Sublime。

【讨论】：