Escaping Hugo shortcodes within Hugo markdown
All notes in this series:
- (1) Automating hugo development with npm scripts
- (2) normalize-scss with hugo
- (3) Automatic image thumbnails in Hugo from static directory
- (4) Escaping Hugo shortcodes within Hugo markdown
- (5) Hugo tag and category pages
- (6) Bind hugo to localhost for development
- (7) Hugo 0.37 does not support h6 markdown heading
- (8) Install Hugo testing distribution on Debian
- (9) Hugo anchors next to headers
- (10) Hugo: Migrating from Pygments to Chroma
If you naïvely try and write a post in Hugo about shortcodes using markdown, including code examples of the shortcodes, Hugo will still try to parse and render the shortcode. For example, if your markdown is as follows…:
{{< example-shortcode >}}
…then Hugo will attempt to find the shortcode example-shortcode and render it, even though it is inside a markdown code block! To avoid that happening, you can use the /* and */ escape sequence, which is typically used to write comments in shortcodes or templates. To get the above example to render, you would have to do the following:
{{</* example-shortcode */>}}
There appears to be no way within markdown to escape a code example of an escaped shortcode. So how did I get the above code example to escape? Perhaps ironically, though creating a new shortcode:
layouts/shortcodes/example-of-example-shortcode.html §
{{ printf "{{ </* example-shortcode */> }}" }}
(Unfortunately the above code example hid the /* and */, so rather than writing another shortcode purely for this post, I inserted a space between them and the adjacent {{ and }}).