Alerts
How to use Alert Shortcodes to render custom page alerts in markdown.
Adding a Page Alert
Page alerts can be added to your markdown using the following shortcode:
{{< alert text="This is the default alert. It consists of a default theme colour and icon." />}}
The above code results in the following alert:
Alert with Context
Add context to an alert via the context parameter:
{{< alert context="info" text="This is an alert with an <strong>info</strong> context. It consists of the info theme colour and icon." />}}
Here’s what is rendered:
Additional alert contexts include success, danger, warning, primary, light and dark:
Alert with Custom Emoji Icon
The default icon for an alert context can be substituted with an emoji using the icon parameter:
{{< alert icon="🍅" context="info" text="This is an <strong>info</strong> context alert with a tomato emoji replacing the default icon. The info theme colour remains unchanged." />}}
Alert with No Icon
Setting the icon parameter to an empty space, icon=" ", will render an alert with no icon:
{{< alert icon=" " context="info" text="This <strong>info</strong> context alert has no icon." />}}
N.B. The icon parameter must contain a space. Setting it to icon="" will render the default icon.
Render Markdown & HTML inside an Alert
So % delimited alerts render correctly, ensure you have unsafe = true set under [markup.goldmark.renderer] in your hugo.toml configuration file1.
Use a paired shortcode with the % delimiter2 to render Markdown and HTML inside an alert:
{{% alert icon="🛒" context="success" %}}
This ***paired shortcode*** alert contains a **markdown** list and header:
#### My Shopping List:
1. Tomatoes
2. Bananas
3. Pineapples
and a sentence <em>styled</em> using <strong>HTML</strong> tags such as \<strong\> and \<em\>
{{% /alert %}}
This paired shortcode alert contains a markdown list and header:
My Shopping List:
- Tomatoes
- Bananas
- Pineapples
and a sentence styled using HTML tags such as <strong> and <em>
Last updated 02 Oct 2023, 21:49 +0100 .