edited on 15.07.2022
I’ve set highlight options in
config.toml like this:
[markup.highlight] codeFences = true guessSyntax = true hl_Lines = "" lineNoStart = 1 lineNos = true lineNumbersInTable = true tabWidth = 4 noClasses = false
If you want to make styling changes on inline code blocks, borders, margins, and font of code blocks etc., you’ll need a custom css file. You can generate the css file based on the existing monokai style then edit the way you like.
hugo gen chromastyles --style=monokai > highlight.css
Before editing the styling right away, you’ll need to set two more settings. These two should be top level like
title in your configuration file, do not place under
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.
pygmentsUseClasses = true
Highlighting for code fences isn’t enabled by default. So, you need to add this line too in your config file.
pygmentsCodefences = true
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 think lacks some detail.