Written by Edd Turtle on makewithhugo.com
on

Syntax Highlighting with Hugo (without JS)

If you are into writing code and use Hugo for building a personal or tech blog - then you’ll want syntax highlighting setup for when you show off your code snippets (like we do on this site!) It is also quite simple when you know how.

Some advantages of using this method include not having to download a JS library to do the job (so performance), not having the code flash on load after the JS finishes and not having to manage another library to do a job that’s already included in Hugo.

config.toml

Step 1) We want to enable the syntax highlighting with pygmentsCodeFences so we add the code below into our config file.

1

pygmentsCodeFences = true

Step 2) In our example, we’re going to use the classes version with pygmentsUseClasses (so we can change the theme). If this if off then it will still work, but it will use inline style tags and give you less flexibility.

1

pygmentsUseClasses = true

Step 3) We can turn on line numbers to appear on the left-hand side of the code.

1
2
3
4
5

[markup]
    [markup.highlight]
        lineNoStart = 1
        lineNos = true
        tabWidth = 4

Step 4) Choose a theme. Hugo’s syntax highlighting is built on Chroma, which in turn is based on pygments - so if you find pygment themes they should work (and are easier to find).

View Themes on Farbox View Themes on StylishThemes

So there we have it - have any cool themes? Let us know in the comments.

#syntax #code #highlight #block #design #theme #chroma
Author Edd Turtle

Edd is a PHP and Go developer who enjoys blogging about his experiences, mostly about creating and coding new things he's working on and is a big beliver in open-source and Linux.

Tweet me! ☕   Buy me a Coffee (Paypal)

Related Posts

  • Add Adsense Ads to Your Posts –
    This post sets out how you can add your Google Adsense code to your blog posts. As this is MakeWithHugo, we’ll be adding them to our Hugo site. You’ll need a few things before starting, an Adsense account, the snippet of code from Adsense and knowing where you want to put them (or auto ads for the easy option). There’s a few different ways to achieve this, based on where you want them.
  • Add a 404 Not Found Page –
    In an ideal world, every web page would exist, but sometimes links go to pages that doen’t exist. This is why we make “404 - not found” pages. In Hugo you can do the same. Many of our sites are hosted with Netlify which also support these files - automatically returning the correct http status code for them. To make yours, you can add a file into your layouts folder.
  • Markdown for Hugo: Cheatsheet –
    This is designed to be a ‘cheatsheet’ to help you find the syntax you need quickly for creating markdown content on Hugo sites. Code Block 1 2 3 4 5 ```css body { background: red; } ``` To define a code block, wrap the code in backticks like: ` Three of them, and you can define the code language after the first set, like we’ve said the above code is css.