Syntax highlighting: how do I change the theme?

support
1

I’m shifting to a different theme (hugo-clarity, from Blackburn) and I’m having trouble changing the source code highlighting from the default theme which is monokai. I want to use the github theme. This is what I’ve done:

  • added style ="github" in the [markup.highlight] section of [markup] in my config file.
  • set pygmentsUseClasses = true and pygmentsCodeFences = true in my config file
  • generated a css file for github using hugo gen chromastyles github > syntax.css,moved that css file to static/css/content.css and included custom_css=["css/syntax.css"] in my config file.

What difference has this made? Nothing. Clearly there’s something else needed, but I can’t find what it is, hence my asking here. I’ve spent the past couple of hours hunting through the documentation, and haven’t found anything that works.

Also, is there any easier way of changing a syntax highlighting theme other than creating a css file for it?

Thank you all very much,
Alasdair

2

Use pygmentsUseClasses = false instead.

Then you can specify the style in config instead of generating a css file: Configure markup | Hugo

markup:
  highlight:
    codeFences: true
    noClasses: true
    style: monokai        # change this bit
3

Many thanks indeed. I’m still not getting it working properly, though. If I set noClasses = true as you recommend, then I can certainly change the style, but there’s something wrong in its appearance: about a third of the characters are whited out and are invisible. They are all there, as I can see by highlighting that region with the mouse. So there seems to be something wrong in the way that either Hugo, my chosen theme, or me, is managing the syntax highlighting.

However - I have found one light theme that works, which is monokailight. That’s the only one I can find that highlights properly: every other Chroma theme insists on turning some characters white. But as I say I don’t know whether this is a theme issue, or me!

Again, many thanks.