Hugo + Pygments—How to change highlighting theme?

pygments hugo
Mirror318 picture Mirror318 · Aug 8, 2016 · Viewed 7.2k times · Source

Using Pygments with Hugo, I can do syntax highlighting with blocks like this:

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

This "works" in that the code is colored, but the colors aren't good, with white text (from Pygments) on white background (from Hugo theme). Is there a way to change the theme of the highlighting?

Answer

Mirror318 picture Mirror318 · Aug 10, 2016

In /config.toml you need these lines:

PygmentsCodeFences = true
PygmentsStyle = "monokai"

For a list of styles, https://help.farbox.com/pygments.html is a good source. I think there are more, but I haven't found a comprehensive list yet.

For the background of code blocks, actually this is set by the Hugo theme, for the Hyde theme I was using I needed to override the css like this:

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

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

And add the ref link to /themes/hyde/layouts/partials/head.html

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

Related questions

Custom tag not loaded in template

I've created a custom tag that I want to use, but Django can't seem to find it. My templatetags directory is set up like this: pygmentize.py from pygments import highlight from pygments.lexers import get_lexer_by_name from …

Read More
lexers vs parsers

Are lexers and parsers really that different in theory? It seems fashionable to hate regular expressions: coding horror, another blog post. However, popular lexing based tools: pygments, geshi, or prettify, all use regular expressions. They seem to lex anything... When …

Read More
Source code highlighting in LaTeX

I need to highlight source code in LaTeX. The package listings seems to be the best choice for most use-cases and for me it was, until now. However, now I need more flexibility. Generally, what I’m looking for is …

Read More