edited on 23.01.2021
I’ve set highlight options in
config.toml like this:
Normally you can add the style option
style = monokai but I had to include a custom
highlight.scss because I wanted to make other styling changes, e.g. inline code blocks, borders, margins, and font. Chroma uses hard-coded styling (inline CSS in HTML), to be able to edit CSS classes you need to tell chroma to use CSS classes instead of embed styling in HTML.
Now, you have to use a custom CSS file for styling. You can generate it by:
Highlighting for code fences isn’t enabled by default. So, you need to add this line too in your config file.
By the way, we are still using Chroma, not Pygments. Don’t let those 2 lines confuse you. Lastly, the original docs: Hugo Docs: Syntax Highligting which I believe lacks some detail.