Configure code block theme for hugo websites

Learn how to configure the code highlighting chroma theme in hugo hextra.

Configure highlight settings

• you have to provide two settings in the hugo.yaml configuration:

  markup:
    highlight:
      noClasses: false
      guessSyntax: true
  • The setting guessSyntax is not really needed. But noClasses must be set to false

Use chroma themes

• you can check how the default hextra css gets used by running the following command:

  hugo mod vender
• you will find two css files called light.css and dark.css in this folder:

  _vendor/github.com/imfing/hextra/assets/css/chroma
• these files can be generated easily via a command for different existing chroma themes
• you can delete the _vendor folder because we will generate the .css files without having to copy anything manually

generate chroma css files

• we will generate the css files at the correct location with these commands
  • assuming that your current working directory is the root of your hugo repo
  • and assuming you do not have any other custom.css with existing content (then you have to edit the content manually)

  mkdir -p assets/css
  echo ".highlight {" > assets/css/custom.css
  hugo gen chromastyles --style=solarized-light >> assets/css/custom.css
  echo "}\n\n.dark .highlight {" >> assets/css/custom.css
  hugo gen chromastyles --style=solarized-dark >> assets/css/custom.css
  echo "}" >> assets/css/custom.css
• you can of course change the --style depending on your preferences

Chroma style galleries

• chroma style gallery on one page
• styles with longer code examples

My favorite themes

light

pygments

• borland
• catppuccin-latte
• github
• gruvbox-light
• manni
• monokailight
• pygments
• rose-pine-dawn
• tango
• vs

dark

monokai

• catppuccin-mocha
• dracula
• evergarden
• gruvbox
• monokai
• native
• onedark
• rose-pine-moon
• witchhazel

Ensure chroma theme usage

```
# this code block sometimes will ignore the defined custom chroma theme
# it will use the default chroma github theme for some reason
```

```python
# this code block will always use the configured custom chroma theme
```

```text
# this code block will always use the configured custom chroma theme
```

• you can try to find code block without a defined language via vscode global search
• activate regex mode (right button next to Aa ab)
• example search query:

  ```\n[\w\t]