I said the other day that I would figure out how to customise the syntax highlighting for the Nord theme , and now I have. If you want to grab the stylesheet for yourself, I’ve uploaded it as a snippet on GitLab . Some quick usage notes (which you’ll find in briefer form at the snippet page, too):
First, make sure your Hugo config file sets the value markup → highlight → noClasses to false (default value is true). For example, if your config file is config.toml you should add:
[markup]
[markup.highlight]
noclasses = false
Whereas if your config file is at config.yaml, you should add:
markup:
highlight:
noClasses: false
Then, download that syntax.css snippet and add it to your Hugo project, probably in the same directory that you keep your other stylesheet(s).
Finally, add a <link> to the <head> section of your template pointing to where your stylesheet will be located on the built site, e.g. <link rel="stylesheet" href="/css/syntax.css">
You’re welcome to use it freely and change any of the values if you don’t like what I set them to, of course. I tried to base my choices both on the Nord theme’s own recommendations and on what different classes share the same colour in the default Hugo monokai colouring (e.g. by default NameTag and Operator take the same colour, so when highlighting HTML the same colour is used for HTML tags and the = signs between attributes and values). But it’s easily customised if you have a better idea 😊
