Hugo escape shortcodes for display

Thu, Mar 10, 2022 One-minute read

In the post on bootstrap style tables in Hugo I wanted to show the actual shortcodes you needed to create in your templates.

But in some cases, Hugo was helpfully rendering the shortcode as the actual output, rather than the raw code.

(This is likely because I have unsafe set to true for historic reasons.)

You can create code blocks using backticks, e.g.,

``` code here ```

but if you try and include HTML (or similar), then the tags themselves just disappear:

this is a table

What I really want to show is

<table>this is a table</table>

This works OK for regular HTML, but if you’re displaying shortcodes, things go awry:

 
 
 


Col 1 Col 2
hello world!

whereas what I really want is to render the actual syntax of the shortcode:

{{< table \"table table-striped table-bordered\" >}}
| Col 1 | Col 2  |
| :-:   | ------ |
| hello | world! |
{{< /table >}}

And this is achieved by escaping the angle brackets using /* and */:

{{</* table \"table table-striped table-bordered\" */>}}
| Col 1 | Col 2  |
| :-:   | ------ |
| hello | world! |
{{</* /table */>}}

Cool! Found here.