Escape Shortcodes in HUGO

If you’re here, you probably just found out that HUGO shortcodes need to be escaped.

I wrote an article on how to inline SVGs in HUGO the other day and ran into the same little snag when trying to place a shortcode in a <code> block. It executed. Not only that, but I didn’t know why.

So, after a quick, not-so-quick Google search, I came upon Chris Liatas’ article on escaping HUGO shortcodes. That being said, first article done and I thought this would be something great to share and keep on the books.

So, here we go.

The Problem

Occasionally, you might need to display a shortcode in your HUGO markdown file without triggering it.

For example, you might want to show {{< myshortcode >}} as raw text in your content, but when you try to escape it with a backslash (\), it doesn’t work. Instead, you might see \{{< myshortcode >}}\ or \{\{</* myshortcode */>\}\}—or worse, the shortcode still executes.

Bjørn Erik Pedersen, HUGO’s creator, assumed that it was just needed for the shortcode documentation, so I never documented that feature itself.

To escape a HUGO shortcode, you can add a /* after the opening double curly braces and the angle bracket or percent sign (i.e., {{< or {{%/*) and adding */ after the closing angle bracket or percent sign and double curly braces (i.e., >}} or */%}}).

That being said, if you wanted to render the shortcode myshortcode, include it in your markdown file as:

  
{{</* myshortcode */>}}

And the above will render the following:

  
{{< myshortcode >}}

Happy coding!