Go Chroma Component

Go Chroma component is for displaying preformatted computer codes with syntax highlighting using Go Chroma package used in Hugo. Bissetii styles its outcome seemlessly to make it compatible with the main design.

This component is available starting from v1.11.0.

Hugo

Due to the requirement to support Hugo as a theme module and Hugo started to use Go Chroma to perform syntax highlighting, Bissetii has to inheritly support Go Chroma rendering adjustment as a module.

The Go Chroma repository is available on Github and Hugo’s guide.

Highlighting Code Using Code Fencing

To highlight codes with syntax highlighting, you can use the code fencing ability. Example:

 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")
}
```

It renders as:

1
2
3
4
5
6
7
8
9

package main

import (
	"fmt"
)

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

Customizing Highlighting Style

The configuration file is located in the markup.toml file inside Hugo’s config file:

name             :                        markup.toml
local directory  :        config/_default/markup.toml
Bissetii repo-doc: .sites/config/_default/markup.toml

Inside the Hugo config markup.toml file, there is a field called style. Bissetii set the default to "monokailight". If needed, simply browse the following gallery here and change it to that title.

1. Summary Text Styling
2. Full Text Styling

Go

Coming Soon.

HTML

Since Go Chroma package generates its own HTML codes seamlessly, there is no HTML guide available.

CSS

Since Go Chroma handles all the styling with inline CSS styling, there is no CSS available for customization.

Javascript

This component does not rely on any Javascript.

Sass

Depending on release version, the Sass files work differently. Bissetii does not package Sass codes explictly so please view them via the git repository.

v1.13.0 and Above

Bissetii uses Dart Sass to compile the styling Sass codes into CSS file. This component’s Sass codes are available at the following location:

pkg/components/internal/gochroma

v1.12.5 and Before

assets/css/bissetii/modules/core/_Codes.scss

This is an optional module since not everyone is using Go Chroma to render code blocks. To include Go Chroma adjustment, you need to enable Go Chroma config in your Sass configuration file:

$config-gochroma: 1

Researches

Here are the researches done to ensure Go Chroma component meets the necessary quality assurances:

SCHEDULED COMING SOON

Epilogue

That’s all about Go Chroma component in Bissetii. If you need more feature or need to report a bug, please feel free to file an issue at our Issue Section.