Hugo : BlockQuote RenderHook Customisation

Overview

For a while now I have been looking on a way to highlight some blocks of texts. But I also wanted to prevent injecting html or tyling code into my markdown files. While looking in Hugo website I have found out there was a way to customize blockquotes to achieve what I was looking for. Here is how I solved my requirement.

This is a normal quote

ℹ️ Note

This is a note type quote.

💡 Tip

This is a tip type quote.

❗ Important

This is an important type quote.

The Render Hook

Create a the render hook in /layouts/_defaults/_markup, and name it render-blockquote-alert.html.

The following code needs to be added :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

{{ $emojis := dict
  "important" ":exclamation:"
  "note" ":information_source:"
  "tip" ":bulb:"
  "meteo" ":sun_behind_small_cloud:"
}}

<blockquote class="md-alert md-alert-{{ .AlertType }}">
  <div class="md-alert-heading">
    {{ transform.Emojify (index $emojis .AlertType) }}
    {{ with .AlertTitle }}
      {{ . }}
    {{ else }}
      {{ or (i18n .AlertType) (title .AlertType) }}
    {{ end }}
  </div>
  {{ .Text }}
</blockquote>

To add new types, simply add anew type in the collection at the top. The corresponding code for the Icon can be found in the reference list of emojis provided by Hugo (see references).

The use of classes will give us the opportunity to customize the different blockquotes.

Styling

We need to add the styling in a css file, if it is a new one don’t forget to add the style import in the header of the page.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

:root {
    --c-success: #03862b;
    --c-danger: #d10015;
    --c-info: #246ede;
    --c-muted: #8a9096;
    --c-text-default: #222;
}

.md-blockquote,
.md-alert {
  margin-bottom: 1rem;
  padding: 0 1rem;
  border-radius: 5px;
  border-left: 4px solid var(--c-muted);
}

.md-blockquote>p:last-child,
.md-alert>p:last-child {
  margin-bottom: 0;
}

.md-alert>p {
    color: var(--c-text-default);
}

.md-alert-heading {
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: 1rem;
  }

.md-alert-meteo,
.md-alert-note {
    border-left:  4px solid var(--c-info);
    color: var(--c-info);
  }

  .md-alert-tip {
    border-left-color: var(--c-success);
    color: var(--c-success);
  }
  
  .md-alert-important {
    border-left-color: var(--c-danger);
    color: var(--c-danger);
    border-bottom:  1px solid var(--c-danger);
    border-top:  1px solid var(--c-danger);
    border-right:  1px solid var(--c-danger);
    width : 90%;
    padding-top: 0.2rem;
    padding-bottom: 0.3rem;
  }

Markdown

To add a blockquote with the specific style, simply add the following to the markdown file :

1
2

> [!IMPORTANT]
> This is an important type quote.

References