Jekyll Alerts

I wanted to display an alert on one of my pages, like this:

I found a page that explained how to use Liquid’s {% include %} to do it. It uses Liquid’s includes, passing parameters.

Based on that, here’s what I came up with.

{% include alerts/danger.html content="**Here be dragons**<br/>I'm going to let you into a secret..." %}

The _includes/alerts/danger.html file looks like this:

<div class="alert alert-danger d-flex" role="alert">
    <i class="bi bi-exclamation-triangle-fill"></i>
    <div markdown="span" style="margin-left: 0.7em;">
        {{ include.content | strip }}
    </div>
</div>

I’ve got corresponding examples (see below) for the other Bootstrap alert types.

Using Markdown

To allow markdown in alerts, the content div has markdown="span". Note that you can only use markdown on spans, not blocks, so you’re unable to use (e.g.) <p>...</p> in the alert, and will have to make do with <br/>.

Nesting Liquid

If you want to use Liquid (e.g. {% post_url %}) in your alerts, you need to capture the HTML first, like this:

{% capture warning %}
**Warning:** An alternative rail-replacement bus service is in operation this weekend.<br/>
For updated timetables, click [here]({% post_url 2021/2021-12-17-jekyll-alerts %}).
{% endcapture %}
{% include alerts/warning.html content=warning %}

Icons

The icons are from the Octicons. With the jekyll-octicons plugin, they can be used like this:

{% octicon alert height:24 %}

I tried to allow overriding the icon, but couldn’t get it to work.

Examples