HUGO

Can't get Syntax Highlighting to work

I have already tried almost everything to activate syntax highlighting, unfortunately I only see the normal text without highlighting. Do you have any idea where the error is? Is there any way to debug pygmentize? Thank you and best regards!

What I did:

Installed the packages
apt install python-pygments python3-pygments

As user

pip install pygments
pygmentize is in the $PATH

Created the CSS file

hugo gen chromastyles --style=monokai > static/css/syntax.css

config.toml

pygmentsUseClassic            = false
pygmentsCodeFences            = true
pygmentsCodeFencesGuessSyntax = true
pygmentsUseClasses            = true  

hugo env

Hugo Static Site Generator v0.51 linux/amd64 BuildDate: 2018-11-07T10:10:13Z
GOOS="linux"
GOARCH="amd64"
GOVERSION="go1.11"

hugo config | grep pyg

pygmentscodefences = true
pygmentscodefencesguesssyntax = true
pygmentsoptions = ""
pygmentsstyle = "monokai"
pygmentsuseclasses = true
pygmentsuseclassic = false

The below lines in your config.toml should be sufficient to provide syntax highlighting. No need to generate a CSS file, unless you would rather do it that way.

pygmentsCodefences = true
pygmentsCodefencesGuessSyntax = true
pygmentsStyle = "monokai"

Note: The above lines will configure your site to use Chroma syntax highlighting, even though the params themselves may have pygments in their name.

If you want a different style than "monokai", checkout the Chroma Style Gallery.


Also, in markdown, are you surrounding your code snippets with 3 backticks?

1 Like

Are you loading the css from your <head>?

Thank you! I have replaced my config with your three lines. less is sometimes more.