Fathy AR A dev blog: journal, notes, and more...

Hugo Tips: Render shortcode syntax as plain text

Posted on in Web Dev · 222 words · 2 minute read
Tagged with: Hugo

TL;DR: Add /* characters after the opening and */ characters before the closing of the shortcode syntax.

When writing a post about creating a shortcode, I encountered a problem which is what this very post is trying to document as I walked myself through solving it.

I tried searching the web on the issue, and just got disappointed by the result—I think I needed to better my keywords. I then went back to Hugo’s documentation of shortcode templates and thought, why not just view the source file of the web page? Isn’t it also built with Hugo? Yes, it is—and is supposed to be. This implies that the source file is also written in Markdown. I should then find how shortcode syntaxes are written to be rendered as plain text and not to be run as a template—just like how they are displayed in the docs page.

I then went to Hugo’s documentation site’s GitHub repo trying to navigate through content files of which is named shortcode-templates—as it is in the url of the docs page that explains about it. And I found it here.

Here’s my finding. You can do so by adding in /* characters after the opening and */ characters before the closing of the shortcode syntax.

The syntax:

{{</* youtube 09jf3ow9jfw */>}}

The result:

{{< youtube 09jf3ow9jfw >}}