Hugo + Pygments - Wie ändert man das Hervorhebungsthema?

Question

Mit Pygments mit Hugo, kann ich Syntax mit Blöcken wie folgt hervorgehoben:

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

Diese „Werke“, die in dem Code ist gefärbt, aber die Farben sind nicht gut, mit weißen Text (von Pygments) auf weißem Hintergrund (von Hugo Thema). Gibt es eine Möglichkeit, das Thema der Hervorhebung zu ändern?

Answer 1

In /config.toml benötigen Sie die folgenden Zeilen:

PygmentsCodeFences = true 
PygmentsStyle = "monokai" 

Eine Liste der Stile, https://help.farbox.com/pygments.html2 ist eine gute Quelle. Ich denke, es gibt mehr, aber ich habe noch keine umfassende Liste gefunden.

Für den Hintergrund der Codeblöcke, die eigentlich von dem Hugo Thema, für das Hyde Thema gesetzt ich war ich mit der CSS wie dies außer Kraft zu setzen benötigt:

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

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

Und füge der Ref Link zu /themes/hyde/layouts/partials/head.html

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

Answer 2

Wählen Sie einfach das Thema aus https://github.com/richleland/pygments-css und passen Sie auf Ihrem CSS. Hier sind meine Hugo-Website Arten von meiner SCSS Datei für Ihre Referenz (Kommentare sind unter bestimmten Zeile):

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

empfehle ich ein Plugin verwendet, die Farbcodes markiert ist, zum Beispiel Color Highlighter für Sublime.