Chroma Custom Styles in Hugo

How to setup custom styles using chroma in hugo.

When using Hugo you may want to customise the style of Chroma (the code snippet renderer in Hugo)

You first need to generate the style sheet from Hugo’s list.

1

hugo gen chromastyles --style=monokailight > themes/default/static/css/syntax.css

Then you need to set the below in your hugo.yaml file, this tells hugo to use classes instead of inline styles. This is important otherwise the class styling is overridden by the inline ones.

1
2
3


[markup]
  [markup.highlight]
    noclasses = false

Then you need to include the CSS in your theme using typical CSS include code.

Bonus
I had issues with the code leaking out of the snippet area. These changes to the exported syntax css fixed it for me:

swap:

1

/* LineTable */ .chroma .lntable { border-spacing:0;padding:0;margin:0;border:0; }

to:

1

/* LineTable */ .chroma .lntable { border-spacing:0; padding:0; margin:0; border:0; width:100%; overflow:auto; display:block; }

Bonus 2
You can preview the styles for Chroma on the Chroma playground.

An image of me! Hi there! I'm Alex, a software developer, entrepreneur behind TitanLogic and a generative artist. As a father of two, I've learned that sharing ideas and discoveries can spark new perspectives.

This website serves as my personal collection of insights on topics I'm passionate about: AI, code, art, music, and building things. While it's primarily for my reference, I hope others will find this information useful too.

I'll be documenting my thoughts, findings, and experiences as I explore these areas. Whether it's trying out new tools, diving into the world of machine learning, or simply sharing tips and tricks from years of software development experience, I aim to keep this site concise and informative.

Contact Me