Syntax Highlighting in Hugo With Chroma

Published: Jan 21, 2019
Updated: May 3, 2021

Hugo has built-in syntax highlighting, provided by Chroma. To use it, you just need 2 lines in your config.toml file:

pygmentsCodefences = true
pygmentsStyle = "pygments"

In the above, pygments is the name of the highlight style. To pick a different style, see the style gallery.

Once you choose a style, you can highlight your code by using markdown code fences (3 backticks), then specifying the programming language. For example, say we wanted to highlight some HTML:

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>
```

The output would be:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>