Hugo Hint/Quote shortcode

Hugo Hint/Quote shortcode

September 2020  361  2 mins Hugo

Shortcode to render hints/quotes within markdown. Dedicated blocks of text help to attract the attention of the reader, especially if they are in a different color. Just do not over use them or they will become annoying and people will automatically ignore them.

This article was written for Hugo 0.74.

Usage

There are 5 variants: normal, info, warning, danger and empty; the last is the default <blockquote> style. You can easily add more styles if you would want to. Note this shortcode requires to use the %-syntax (see this post for more info).

Example

{{% hint info %}}
Example text that *may* contain **markdown** `markup` and [links]().

And other shortcodes will work as well:
{{% hint warning %}}
Example text that *may* contain **markdown** `markup`.
{{% /hint %}}
{{% /hint %}}
{{% hint warning %}}
Example text that *may* contain **markdown** `markup`.
{{% /hint %}}
{{% hint danger %}}
Example text that *may* contain **markdown** `markup`.
{{% /hint %}}
{{% hint normal %}}
Example text that *may* contain **markdown** `markup`.
{{% /hint %}}
{{% hint %}}
Example text that *may* contain **markdown** `markup`.
{{% /hint %}}

Example text that may contain markdown markup and links.

And other shortcodes will work as well:

Example text that may contain markdown markup.

Example text that may contain markdown markup.

Example text that may contain markdown markup.

Example text that may contain markdown markup.

Example text that may contain markdown markup.

Code

The HTML shortcode, it is nothing more than a styled <blockquote>. For more info why print is required see this post.

1
2
3
4

{{ $type := .Get 0 }}
{{ printf "<blockquote class=\"md-hint %s\">" $type | htmlUnescape | safeHTML }}
{{ .Inner | safeHTML }}
{{ printf "</blockquote>" | htmlUnescape | safeHTML }}

The accompanying SCSS

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

.md-hint {
  &.info {
    border-left-color: rgba(var(--md-hint-info-color), 1);
    background-color: rgba(var(--md-hint-info-color), 0.25);
  }

  &.warning {
    border-left-color: rgba(var(--md-hint-warning-color), 1);
    background-color: rgba(var(--md-hint-warning-color), 0.25);
  }

  &.danger {
    border-left-color: rgba(var(--md-hint-danger-color), 1);
    background-color: rgba(var(--md-hint-danger-color), 0.25);
  }

  &.normal {
    border-left-color: rgba(var(--md-hint-normal), 1);
    background-color: rgba(var(--md-hint-normal), 0.05);
  }
}
Noticed an error in this post? Corrections are appreciated.
© Nelis Oostens