Bye bye Prism. Welcome Chroma.

I just learnt that from version 0.28 Hugo comes with a built-in syntax highlighter called Chroma .

It supports syntax highlighting with GitHub flavoured code fences!
This is more than great!
Because of this I could quickly get rid of a bit bulky Prism JS syntax highlighter.

Enable Chroma

Start by choosing your Chrome style from gallery available at https://help.farbox.com/pygments.html

Then generate a css file:

hugo gen chromastyles --style=pastie > static/css/syntax.css

And finally modify your config.toml

pygmentsUseClasses = true
pygmentsUseClassic = false
pygmentsCodefences = true

[params.assets]
customCSS = ["css/syntax.css"]

NOTE:

• Setting pygmentsUseClassic to false will disable old and slower Pygments

Chroma vs Github fences

Chroma

Among quite a few syntax highlighting configuration options ¹ Chroma has two very handy ones:

• highlight specific lines and/or ranges
• start line counter from any number

NOTE:
In order to force Hugo to correctly render the example snippet below, I placed a space " " between first two curly braces {{ and lower than sign < in the first and the last line of the snippet.

{{ < highlight python "linenos=table,hl_lines=1 4-5,linenostart=99" >}}
from time import time

def since_epoch() -> float :
    # some comment
    return time.time()
{{ < / highlight >}}

Here’s how this snippet renders:

 99
100
101
102
103

from time import time

def since_epoch() -> float :
    # some comment
    return time.time()

Github fences

Below is a sample python snippet surrounded with regular Github fences:

```python
from time import time

def rettt() -> str :
    return time.time()
```

and here’s how it looks like after rendering:

from time import time

def rettt() -> str :
    return time.time()