Markdown inside shortcodes: span works, div doesn't

support
1

I have a shortcode named medium.html, with the following contents:

<span class="medium-tier">**Medium and above**: {{ .Inner }}</span>

There is some styling:

.medium-tier {
    border-left: 0.25rem solid rgba(255, 23, 68, 0.3);
}

I use it as follows:

{{% medium %}}Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.{{% /medium %}}

This works fine. However, if I want more complex contents, the styling breaks:

{{% medium %}}

### A subheading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

### Another subheading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

> **Note:** A note.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

{{% /medium %}}

I get the “Medium and above” formatted correctly (bold, pink border), but the rest lacks the border.

So I tried putting it in a div instead of a span:

<div class="medium-tier">**Insight and above**: {{ .Inner }}</div>

This caused it to ignore all the markdown formatting. Everything appears as a single massive paragraph, with the markdown syntax displayed like plain text. It does all get the border though.

Is there a reason that div stops Hugo from parsing the markdown in {{ .Inner }}? Anyone know of the correct way round this?

Edit to add: Hugo 0.58.2
It seems selective about what markdown it parses. For example:

{{% medium %}}Some test content. ### A test heading{{% /medium %}}

“test” is bold as expected, but it just prints the ### (this is with using span)

And if you use <p> it has the same problem (doesn’t parse the markdown)