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.