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 renders:
|
|
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
Inside the 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.