Hugo by default uses chroma for syntax highlighting. You can also use your own stylesheets for syntax highlighting. According to the docs you set pygmentsUseClasses=true in your config and then run the following command to generate the stylesheet.

hugo gen chromastyles --style=<style_name> > syntax.css

Here is a helper script I have created to generate syntax.css for the different styles available in the chroma repository.

# generate_syntax.sh
#!/usr/bin/env bash
set -euo pipefail

# the cp is just a way to track which css you might end up liking
cp static/css/syntax.css static/css/syntax_$(date +'%Y_%m_%d_%H_%M_%S').css
hugo gen chromastyles --style=$1 > static/css/syntax.css
echo "@media (prefers-color-scheme: dark) {" >> static/css/syntax.css
hugo gen chromastyles --style=$2 >> static/css/syntax.css
echo "}" >> static/css/syntax.css

Now you can run the script by calling it from the root of your project as follows.

bash generate_syntax.sh solarized-light solarized-dark

Point to note is that the first argument is the light theme and the second is the dark theme.

When I go through the source code of chroma I see that each style have different number of total definitions for syntax highlighting. I suggest to pick two themes from the top 10 which can cover a lot of syntax for highlighting so that you don’t end up with a css which you would have to fill up manually for colours.

git clone https://github.com/alecthomas/chroma.git
wc -l chroma/styles/* | sort -h | tail

   59 styles/murphy.go
   60 styles/lovelace.go
   62 styles/xcode-dark.go
   71 styles/doom-one2.go
   75 styles/nord.go
   79 styles/tango.go
   81 styles/base16-snazzy.go
   81 styles/dracula.go
   95 styles/vulcan.go
 1988 total

I have picked tango and doom-one2 as my light and dark syntax themes respectively. What have you picked? Send me an email and let me know 😁 I hope this was useful to you.