(updated ) by

Making custom highlighting styles in Hugo with Chroma

Hugo uses Chroma for syntax highlighting. Hugo has a {{ < highlight > }} shortcode.

Custom Styles

For this site I made some custom styles. To do this, we need to change the highlighter to use classes.

markup:
  highlight:
    noClasses: false

Generate CSS

hugo gen chromastyles --style swapoff > syntax.css

This gives you a baseline style to work with. The classes are fairly straight forward. Using the browser inspect tool, you’ll find it easy to see the class to target.

CSS Variables allow for you to standarize the colors. My example below is not great but gives you an idea of some options.

.chroma {
	--yellow-bright: #ffff9d;
	--yellow-dim: #c9c95c;
	--error: #ffb48e;
	--keyword: #ffb48e;
	--orange-dim: #ffc2aa;
	--variables: #77a5a1;
	--attribute: #68c8d2;
	--o: #b3ffa4;
	--p: #62b0b0;
}

.chroma .nx {
	color: var(--o);
}