I Like Alert Boxes

A few months ago, I discovered alerts, or admonitions, and I thought it was pretty much the best thing in markdown since markdown. They were originally a github feature in github-flavored markdown, but it’s found its way into other platforms. It’s not part of the commonmark spec, but it generally works like:

> [!tip] You stick a heading here
> And then you put your message here.

By default Hugo doesn’t render these like I’d want them to be, and I’m not sure why.

Giving My Blockquote that Sauce

Unless I’m writing some kind of actual quote, my blockquotes generally are almost always an alert of some kind. I can’t help it, it’s like a sort of blockquoting illness I have. So a lot of my blog is littered with hopeful attempts of formatting what I want. To fix this, we need to use a blockquote render hook to get the effect we want. The default hook on the site is enough to get started and build off of:

{{ $emojis := dict "caution" ":exclamation:" "important" ":information_source:"
"note" ":information_source:" "tip" ":bulb:" "warning" ":information_source:" }}
{{ if eq .Type "alert" }}
<blockquote class="alert alert-{{ .AlertType }}">
  <p class="alert-heading">
    {{ transform.Emojify (index $emojis .AlertType) }} {{ with .AlertTitle }} {{
    . }} {{ else }} {{ or (i18n .AlertType) (title .AlertType) }} {{ end }}
  </p>
  {{ .Text }}
</blockquote>
{{ else }}
<blockquote>{{ .Text }}</blockquote>
{{ end }}

And with that, you get something a little like this.

ℹ️ This Looks A Lot Better

It’s a matter of opinion, but my opinions are the ones getting written down.