Markdown alerts do not seem to display background color

[colinwilson]

Markdown alerts do not seem to display background color

[colinwilson]

Having trouble replicating this. Your example:

{{% alert icon="🍅" context="success" %}} 
Markdown 
{{% /alert %}}

renders as below for me (Chrome/FireFox on Windows/MacOS):

Do you see any warnings, errors, 404's in Chrome's dev tools? Is the alert code nested inside another Shortcode?

[Nadine2016]

@colinwilson It looks like that the markdown alert is not assigned a css class, but HTML alerts are assigned one.

This is the example for the markdown alert

And this is the HTML alert output:

This shortcode is not used within a shortcode. It is placed right underneath the heading. I was checking the network tab in the Chrome developer tools, but I cannot see any errors. I am using Hugo 117 to build my site. I am not sure if it could be related to the Hugo version?

[colinwilson]

Ah, Apologies!

This is due to a lack of documentation on my part!

The <!-- raw HTML omitted --> in your screenshot indicates a missing (required) parameter in your hugo.toml config.

Set unsafe = true under [markup.goldmark.renderer] in your hugo.toml config like below:

[markup.goldmark.renderer]
    unsafe = true

• Without the unsafe = true setting, raw HTML in a Goldmark-flavored Markdown source file will be replaced with <!-- raw HTML omitted --> in the markdownified⁠ destination file. This was introduced in Hugo v0.60.0 when Goldmark became the default library used for Markdown in Hugo. The markdown (%) alert shortcode won't render properly without this setting.

I'll document this ASAP and update the example hugo.toml in the repo.

[Nadine2016]

ah awesome! this worked like a charm. Thank you so much! :)

[colinwilson]

You're welcome. 👍

I'll close this once I've updated the docs and repo to reflect the config requirements for the theme.