Hugo shortcode for raw HTML

Sometimes we need to add raw HTML content in markdown files. We can do it before or after, the content. And in the middle of content using shortcodes. Here is how to create your own one-line custom shortcode to make that possible.

Create html file located in /layouts/shortcodes/rawhtml.html.

<!-- raw html -->
{{.Inner}}

And then you can use the shortcode in your markdown file e.g:

{{ < rawhtml > }}
  <p>Hello World!</p>
{{ < /rawhtml >}}

Important Considerations

• Exercise caution when embedding raw HTML, especially from untrusted sources. Sanitize user-generated HTML to prevent potential vulnerabilities like cross-site scripting (XSS).
• Maintain accessibility best practices even with raw HTML elements. Include alternative text, ARIA attributes, and semantic structure as needed.
• In most cases, it’s preferable to see if Hugo’s built-in templating features can achieve your desired layout. Resort to raw HTML when it’s truly the best solution.