How To Highlight Code Syntaxes As Hugo Theme
Thanks to Hugo's built-in support of using its Chroma to highlight code syntaxes, Bissetii can safely supports it inheritly starting from version "v1.9.0". This allows various useful code snippets to be rendered with colorful highlighting for better visual perception.
Patching Configuration File
Bissetii added a new configuration file for Code Syntaxes Highlighter. If your
Hugo engine is not up-to-date to minimum
v1.9.0 version, you will need to
add this configuration file manually to this location:
local directory : /config/_default/markup.toml repo-docs directory: .sites/config/_default/markup.toml
Otherwise, you cannot control the highlighter and may break your Bissetii default styling.
The file is available at: https://gitlab.com/zoralab/bissetii/-/blob/master/config/_default/markup.toml
Enable/Disable Code Syntaxes Highlighting
Unfortunately, there is no way to enable/disable this feature.
Composing Code Snippet with Highlighter
There are 2 ways to do it:
- Using code fencing (recommended)
- Using Hugo shortcode
Using Code Fencing (Recommended)
You do not need to modify your
markup.toml configuration file just for
rendering all the time. Code fencing is something like:
That being said, you can style your snippet on-the-spot. These are the available options for code fencing:
Using Hugo Shortcode
Hugo provides shortcode as an alternative. You may refer to this link: https://gohugo.io/content-management/syntax-highlighting/#highlight-shortcode
Customizing Highlighting Style
markup.toml, there is a field called
style. For Bissetii, it
is default to
"monokailight". Of course, if you want to alter it, simply
browse the gallery here and change it to that title.
- Summary Text Styling
- Full Text Styling