GitHub flavoured code fences in Hugo

published on March 28, 2016.
Heads-up! You're reading an old post and the information in it is quite probably outdated.

This was an undocumented feature until today, so I missed it when I was converting my site to Hugo last week. It is also possible to highlight code examples with GitHub flavoured code fences, or, in other words, with triple backticks ```.

I like this a lot because it makes highlighting code in posts easier. Typing the {{< highlight >}} shortcode is just awkward and I always end up forgetting either the angle brackets or add too much or too little currly brackets. Backticks are much nicer.

The code fences are not enabled by default, though. We need to set PygmentsCodeFences to true in Hugo’s configuration file and that’s about it. Everything else about syntax highlighting stays the same.

Change to backticks in old posts

I used these two simple sed one-liners to change all the highlighting shortcodes to the code fences:

find -name "*.md" -print0 | xargs -0 sed -i 's/&#123;&#123;< highlight \([a-z]*\) >&#125;&#125;/``` \1/g'
find -name "*.md" -print0 | xargs -0 sed -i 's/&#123;&#123;< \/highlight >&#125;&#125;/```/g'

Now I don’t even need a custom Vim function to insert the highlighting shortcode. Sweet.

Thanks for reading! If you require help on a project of any kind, let's talk!

Robert Basic

Robert Basic

Software engineer, consultant, open source contributor.

Let's work together!

If you require outsourcing or consulting help on your projects, I'm available!

Robert Basic © 2008 — 2019
Get the feed