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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
```go {linenos=table,hl_lines=[4,"7-9"],linenostart=1}
package main

import (
	"fmt"
)

func main() {
	fmt.Printf("Hello World, %s\n", "Cheri")
}
```

That renders:

1
2
3
4
5
6
7
8
9
package main

import (
	"fmt"
)

func main() {
	fmt.Printf("Hello World, %s\n", "Cheri")
}

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.