Hugo shortcode ignored saying "raw HTML omitted"

Question

I have written a shortcode to create a bootstrap dismissable alert box. Below is my shortcode called as layouts/shortcodes/message.html.

   <div class="alert alert-{{.Get 0}} alert-dismissible fade show" role="alert">
       {{.Inner}}
     <button type="button" class="close" data-dismiss="alert" aria-label="Close">
       <span aria-hidden="true">&times;</span>
     </button>
   </div>

This is how I am calling from my content markdown file:

{{% message warning%}}
This can cause build errors
{{% /message %}}

However, in the output HTML, below code is generated :

<!-- raw HTML omitted -->
<p>This can cause build errors</p>
<!-- raw HTML omitted -->

I don't understand what's wrong here. I have created other shortcodes (not using .Inner though, this is my first attempt) and they work fine e.g. I created a shortcode for a image grid like pinterest that accepts upto 10 image URLs and spits out HTML. Not sure why this specific .Inner shortcode fails. Please help. My Hugo version is v0.74.3/extended darwin/amd64.

EDIT

When I use the tags {{< >}} instead of {{% %}} then it works. But I may put some markdown in Inner Text and hence would like to use {{% %}}.

If I understand correctly, using {{% %}} will first process the markdown inside the Inner Text and then will pass that to the shortcode as .Inner.

Answer 1

This is the most frequently asked question in Newest 'hugo' Questions - Stack Overflow within the last 5 days!¹

In your Hugo config file, you need to tell the default Markdown renderer, which is Goldmark, to render raw HTML. If you use a config.yaml, use this:

markup:
  goldmark:
    renderer:
      unsafe: true

If you use a config.toml, use this:

[markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true

I wrote about this on my website in http://www.ii.com/hugo-tips-fragments/#_markup.

Answer 2

If you would like to keep your markdown render safe (e.g. if you have guest authors on your site or want to prevent blog post writers from adding javascript to their posts) then you can use the markdownify function in your shortcode as follows:

   <div class="alert alert-{{.Get 0}} alert-dismissible fade show" role="alert">
       {{ .Inner | markdownify }}
     <button type="button" class="close" data-dismiss="alert" aria-label="Close">
       <span aria-hidden="true">&times;</span>
     </button>
   </div>

Then in your content markdown file:

{{< message warning >}}
This can cause build errors
{{< message />}}

This seemed to be the best and simplest solution for us because it did not require us to modify our global configuration.