GoHugo callouts

Published on 2025-06-15 | Updated on 2025-06-19

I tend to write my fair bit on Confluence (for work) or Obsidian (for personal notes). In both places I use callouts to draw the attention of the readers.

I miss them over here. So I set myself the task of enabling them. This is how I am doing it.

Create an HTML file with the following content in your layouts. Note that in line 2 and 3 I am defining the callout types I want to have and the emoji that it will show. Add the ones you want here.

layouts/_default/_markup/render-blockquote.html

 1{{ $emojis := dict
 2  "note" ":information_source:"
 3  "warning" ":warning:"
 4}}
 5
 6{{ if eq .Type "alert" }}
 7  <blockquote class="alert alert-{{ .AlertType }}">
 8    <p class="alert-heading">
 9      {{ transform.Emojify (index $emojis .AlertType) }}
10      {{ with .AlertTitle }}
11        {{ . }}
12      {{ else }}
13        {{ or (i18n .AlertType) (title .AlertType) }}
14      {{ end }}
15    </p>
16    {{ .Text }}
17  </blockquote>
18{{ else }}
19  <blockquote>
20    {{ .Text }}
21  </blockquote>
22{{ end }}

I add the following CSS to give some color. If you want to add more callout styles, add your own .alert-<callout> and the border and backgroud colors. Note the @media (prefers-color-scheme: dark) part, this is the way I make sure the callouts colors adjust to the light or dark theme of the blog.

static/css/blockquotes.css

 1.alert-note {
 2  border-left: 4px solid #3273dc;
 3  background: #e3f0ff;
 4}
 5
 6.alert-warning {
 7  border-left: 4px solid #dcaf32;
 8  background: #fff8e3;
 9}
10
11.alert {
12  padding: 0.2em 1em;
13  margin: 1em 0;
14  border-radius: 4px;
15}
16
17@media (prefers-color-scheme: dark) {
18  .alert-note {
19    border-left: 4px solid #82c1f5;
20    background: #3e81c3;
21  }
22
23  .alert-warning {
24    border-left: 4px solid #f5de82;
25    background: #c39d3e;
26  }
27}

Now just add the CSS to the website by adding the following file and content.

layouts/partials/custom_head.html

1<link rel="stylesheet" href="/css/blockquotes.css">

The result

Create a note by using this block.

1> [!NOTE]
2> This is a note

Note callout without custom title

Add your own title by doing this.

1> [!NOTE] My note
2> This is a note

Note callout with custom title

Or make it a warning like this.

1> [!WARNING]
2> This is a warning

Warning callout without custom title

#hugo #go-hugo #callouts