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.