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
17
18
19
20
21
22

<h1>This is Markdown Heading</h1>
<p>Your normal text here.</p>

<aside class="note info">
<img alt="ADDITIONAL NOTE"
	src="https://bissetii.zoralab.com/img/icons/info-icon.svg"
	class="note-icon"
	width="25"
	height="25"/>
	<p class="note-title">Important Note</p>
	<div class="note-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.