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 26 Jul 2024, 13:46 +0800 .