Syntax highlighting

Syntax highlighting is performed with Chroma and must be explicitly enabled with a few flags in your site configuration.

pygmentsUseClasses = true  # use class names instead of directly inserting color codes
pygmentsCodeFences = true  # enable GitHub style code snippets

[params]
  highlight = true

You can now add code snippets in your Markdown.

{{<highlight html>}}
<h1>Hello, World!</h1>
{{</highlight>}}

You can also enable GitHub style code snippets with the pygmentsCodeFences flag.

``` html
<h1>Hello, World!</h1>
```

Theme

The default syntax theme is Monokai. To use a different theme, generate a new stylesheet. Run the following commands from the root of your website.

$ mkdir -p assets/css/
$ hugo gen chromastyles --style=monokailight > assets/css/syntax.css

See the style gallery for a list of all available styles.

Appearance

To enable different syntax highlighting themes for light versus dark mode, modify the generated syntax.css file to include a separate set of CSS rules when light mode is preferred. The file should follow the format:

<dark-mode-styles>

@media (prefers-color-scheme: light) {
<light-mode-styles>
}

where <dark-mode-styles> and <light-mode-styles> are CSS rules generated from the hugo gen chromastyles command described above. For example, run the following from your website root to use a dark syntax theme in dark mode, and a light syntax theme in light mode:

$ mkdir -p assets/css/
$ hugo gen chromastyles --style=monokai >> assets/css/syntax.css
$ echo "@media (prefers-color-scheme: light) {" >> assets/css/syntax.css
$ hugo gen chromastyles --style=monokailight >> assets/css/syntax.css
$ echo "}" >> assets/css/syntax.css