Syntax Highlighting

If you don't like the default syntax highlighting provided by Hugo, Setting customSyntaxHighlighting = true will enable the custom syntax highlighting provided by Chroma.

You still need to set below configuration in your hugo.toml:

[markup]
[markup.highlight]
noClasses = false

This makes sure that the generated HTML uses classes for syntax highlighting, not inline styles.

Then you need to specify what themes you want to use and generate them. They need to follow below established rules:

You must generate separate themes for light and dark modes
They must be named syntax-light.css and syntax-dark.css
They must be in the assets/css directory

For example, you can generate them using the following command:

# In your project directory.
hugo gen chromastyles --style=github > assets/css/syntax-light.css
hugo gen chromastyles --style=github-dark > assets/css/syntax-dark.css

Please refer to the official documentation (opens in a new tab) for more information.

Summary Images Custom Archives Header