Kishore Vancheeshwaran
Syntax highlighting in light and dark mode in hugo

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.

#!/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 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
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.

If you would like to leave a comment, contact me via email.
Post 7/99 - part of 100DaystoOffload