Hugo: Insert Raw HTML with a Shortcode

As much as I prefer writing my texts using Markdown - because it’s simple, easy and fast - once in a while I need to insert some raw html. So how to do that within the Markdown content of Hugo?

Add the following into the file layouts/shortcodes/rawhtml.html:

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

This template tells Hugo to simply render the inner content passed to your shortcode directly into the HTML of your site. Which is great - you get to keep writing your texts in Markdown, while at the same time having the flexibility to insert raw HTML when needed.

You can then use this shortcode in your markdown content, like so:

{{ < rawhtml >}}
  <p>
    Here we have some <strong>raw HTML</strong> all within the <i>Hugo Markdown content</i>.
  </p>
{{ < /rawhtml >}}

Note: You’ll need to adjust this so the < is touching the { like this: {<

Which then renders as:

Here we have some raw HTML, all within the Hugo Markdown content.

This makes it a lot easier to e.g insert href’s with _blank etc.

:wq