Raw HTML shortcode in Hugo

2020-07-28 (Tuesday) | 100 words (~1 minutes reading)

Here’s a little Hugo shortcode for including raw HTML within your Markdown content.

Just create a shortcode file at e.g. layouts/shortcodes/rawhtml.html with this content:

{{.Inner}}

Now in your Markdown content you can include whatever raw HTML you want, e.g.:

{{< rawhtml >}}
  <button class="buttonFromMarkdown">Click Me!</button>
  <script>
    document.querySelector(".buttonFromMarkdown").onclick = function (event) {
        console.log("Clickety click");
        event.target.style = "background-color: #77dd77";
    };
  </script>
  <style>
    .buttonFromMarkdown {
      padding: 1em;
      cursor: pointer;
    }
  </style>
{{< /rawhtml >}}

Which results in:


Tech mentioned