Hugo: Migrating from Pygments to Chroma

10 April 2024

All notes in this series:

(1) Automating hugo development with npm scripts
(2) normalize-scss with hugo
(3) Automatic image thumbnails in Hugo from static directory
(4) Escaping Hugo shortcodes within Hugo markdown
(5) Hugo tag and category pages
(6) Bind hugo to localhost for development
(7) Hugo 0.37 does not support h6 markdown heading
(8) Install Hugo testing distribution on Debian
(9) Hugo anchors next to headers
(10) Hugo: Migrating from Pygments to Chroma
(11) Hugo: Global resources

These notes cover how this website switched from Pygments to Chroma for code syntax highlighting.

Pygments §

This website is generated by Hugo. Prior to Hugo v0.28, Pygments was the default syntax highligher.

Enabling use of Pygments was a matter of adding this to your hugo.toml:

`hugo.toml` (Pygments) §

pygmentsCodeFences = true
pygmentsStyle = "monokai"

This enabled the monokai theme for syntax higlighting.

Pygments themes §

A couple dozen other supported styles were available.¹

Chroma §

In Hugo v0.28 (released 2017-09-25), the default syntax highlighter changed from Pygments to Chroma. For a couple of years both were supported, but in Hugo v0.60 (released 2019-11-10), support for Pygments was removed.

Enabling use of Chroma can be done by replacing the Pygments configuration with the following:

`hugo.toml` (Chroma) §

[markup]
  [markup.highlight]
    anchorLineNos = false
    codeFences = true
    guessSyntax = false
    hl_Lines = ''
    hl_inline = false
    lineAnchors = ''
    lineNoStart = 1
    lineNos = false
    lineNumbersInTable = true
    noClasses = true
    noHl = false
    style = 'monokai'
    tabWidth = 4

Again, this enables the monokai them for syntax higlighting.

Chroma themes §

Here are galleries of all Chroma themes:²

Here is the full list of Pygments themes: autumn, borland, bw, colorful, default, emacs, friendly, fruity, manni, monokai, murphy, native, pastie, perldoc, tango, trac, vim, vs. ↩︎
Here is the full list of Chroma themes: abap, algol, algol_nu, api, arduino, autumn, average, base16-snazzy, borland, bw, catppuccin-frappe, catppuccin-latte, catppuccin-macchiato, catppuccin-mocha, colorful, compat, doom-one, doom-one2, dracula, emacs, friendly, fruity, github-dark, github, gruvbox-light, gruvbox, hr_high_contrast, hrdark, igor, lovelace, manni, modus-operandi, modus-vivendi, monokai, monokailight, murphy, native, nord, onedark, onesenterprise, paraiso-dark, paraiso-light, pastie, perldoc, pygments, rainbow_dash, rose-pine-dawn, rose-pine-moon, rose-pine, rrt, solarized-dark, solarized-dark256, solarized-light, swapoff, tango, trac, vim, vs, vulcan, witchhazel, xcode-dark, xcode. ↩︎

Tagged
Hugo
CSS