Enable Markdown Callout in Hugo

Callouts or admonitions are blockquotes that emphasize information. The basic Markdown syntax for them is

>[!NOTE]
>your input here

>[!TIP]
>your input here

>[!IMPORTANT]
>your input here

>[!WARNING]
>your input here

>[!CAUTION]
>your input here

However, the PaperMod theme doesn’t seem to support callouts. Following the Hugo documentation, this can be achieved using blockquote render hook.

In layouts/_default/_markup/, create render-blockquote.html with the following code

{{ $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 }}

This blockquote render hook renders the callout if a callout designator is present. Then add entries for callout box labels in i18n/en.yaml

- id: caution
  translation: "Caution"

- id: important
  translation: "Important"

- id: note
  translation: "Note"

- id: tip
  translation: "Tip"

- id: warning
  translation: "Warning"

The rendered callout looks like this

IMPORTANT

This is what the callout looks like.

IMPORTANT

Enjoy Reading This Article?