note Shortcode

note shortcode is a Hugo-only feature to quickly create the Bissetii's note component. This allows content creators to focus on writing the contents instead of rendering HTML here and there. By default, the shortcode renders the content as markdown. If HTML is detected, the shortcode will switch the rendering to safe HTML instead.

Example usage:

1
2
3
{{< note "warning" "WARNING" >}}
	Please proceed with extreme caution.
{{< /note >}}

This shortcode is available starting from v1.12.1.

Heads-Up

While the shortcode is useful, it breaks the Markdown syntax conventions due to Hugo specific shortcode feature. Therefore, when using other Markdown renderer, these shortcodes would be rendered as text instead of HTML code fragments.

Also, be careful and stay safe while using this shortcode. It allows any form of HTML to be embedded into your Markdown page.

Using note

{{< note <type> <title> >}}
	<content>
{{< /note >}}

note uses both parameters and content as its input methods. For parameters, note shortcode accepts the following in strict order:

  1. <type> - the type of notes. See Note Component for available types.
  2. <title> - the title of the note. It is bolded by default.

As for <content> inside the shortcode wrapper, you MUST decide either to write as strictly Markdown format or strictly HTML format but not both simultenously.

The shortcode will first render the <content> as Markdown format. Should it detects any HTML codes, it will automatically switch to safeHTML format rendering instead.

The shortcode will render the output accordingly and seamlessly to its output types automatically (example: vanilla HTML for normal HTML output; AMP HTML for AMP output).

Example

Since this is a HTML renderer in Markdown file, you want to call in the shortcode using the < symbol instead of %. The brackets are as follow:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
# This is Markdown Heading
Your normal text here.

{{< note "info" "Important Note" >}}
This is the content of the note. By default, it is rendered as Markdown. Should
any HTML codes is detected, the shortcode with switch to render safeHTML
instead. Hence, please choose wisely.

Also, if you are using shortcode in here, due to Hugo's limitation, you
**must** use HTML format.
{{< /note >}}

## Back to Markdown

This will render the output as:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<h1>This is Markdown Heading</h1>
<p>Your normal text here.</p>

<aside class="note info">
	<svg class="icon" version="1.1" viewBox="0.0 0.0 4096.0 4096.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><clipPath id="p.0"><path d="m0 0l4096.0 0l0 4096.0l-4096.0 0l0 -4096.0z" clip-rule="nonzero"/></clipPath><g clip-path="url(#p.0)"><path fill="#000000" fill-opacity="0.0" d="m0 0l4096.0 0l0 4096.0l-4096.0 0z" fill-rule="evenodd"/><path fill="#0000ff" d="m653.9344 2048.0l0 0c0 -774.10315 627.5346 -1401.6378 1401.638 -1401.6378l0 0c371.7373 0 728.2495 147.67218 991.1074 410.53027c262.85815 262.85803 410.53027 619.3701 410.53027 991.10754l0 0c0 774.1033 -627.53467 1401.6377 -1401.6377 1401.6377l0 0c-774.1033 0 -1401.638 -627.5344 -1401.638 -1401.6377z" fill-rule="evenodd"/><path stroke="#9fc5e8" stroke-width="24.0" stroke-linejoin="round" stroke-linecap="butt" d="m653.9344 2048.0l0 0c0 -774.10315 627.5346 -1401.6378 1401.638 -1401.6378l0 0c371.7373 0 728.2495 147.67218 991.1074 410.53027c262.85815 262.85803 410.53027 619.3701 410.53027 991.10754l0 0c0 774.1033 -627.53467 1401.6377 -1401.6377 1401.6377l0 0c-774.1033 0 -1401.638 -627.5344 -1401.638 -1401.6377z" fill-rule="evenodd"/><path fill="#ffffff" d="m1860.1077 1834.5603l0 0c0 -35.98474 29.171387 -65.15613 65.15613 -65.15613l260.61682 0l0 0c17.280518 0 33.85327 6.864624 46.072266 19.083862c12.219238 12.219116 19.083984 28.79187 19.083984 46.072266l0 1030.79c0 35.984863 -29.17163 65.15625 -65.15625 65.15625l-260.61682 0c-35.98474 0 -65.15613 -29.171387 -65.15613 -65.15625z" fill-rule="evenodd"/><path fill="#ffffff" d="m1860.1077 1360.9423l0 0c0 -107.94336 87.51245 -195.44885 195.4646 -195.44885l0 0c51.840332 0 101.55762 20.591919 138.21436 57.245605c36.656494 36.65381 57.250244 86.36694 57.250244 138.20325l0 0c0 107.94336 -87.512695 195.44885 -195.4646 195.44885l0 0c-107.95215 0 -195.4646 -87.50549 -195.4646 -195.44885z" fill-rule="evenodd"/></g></svg>
	<p class="title">Important Note</p>
	<div class="content"><p>This is the content of the note. By default, it is rendered as Markdown. Should
any HTML codes is detected, the shortcode with switch to render safeHTML
instead. Hence, please choose wisely.</p>
<p>Also, if you are using shortcode in here, due to Hugo&rsquo;s limitation, you
<strong>must</strong> use HTML format.</p>
</div>
</aside>


<h2>Back to Markdown></h2>

Conclusion

That’s all about note shortcode in Bissetii. If you need more feature or need to report a bug, please feel free to file an issue at our Issue Section.