Simple shortcodes

Introduction

The simple.css offers a selection of neatly formatted elements - as shown on the demo page. Some of these aren’t available as markdown elements though, so aren’t directly usable. It is possible to turn on Hugo’s ability to render HTML tags within the markdown source, however it’s considered ^{1 2} more idiomatic to use shortcodes.

Creating shortcodes rather than using ‘unsafe’ HTML does mean that changes at a later time are easier. Modifications may be made in one place, the shortcode definition, rather than lots of content files.

Creating shortcodes

Shortcodes are just more HTML templates, placed in the layouts/shortcodes directory. There are some example custom shortcodes of varying complexity within the Hugo documentation. I’ve created some shortcodes implementing some of the elements that simple.css provides - but not all of them, yet.

In the example code below I’ve had to escape the shortcodes to stop them rendering ³.

Linkbutton

layouts/shortcodes/linkbutton.html

<a class="button" href="{{ index .Params 0 }}">{{ index .Params 1 }}</a>

{{< linkbutton "https://blog.timparkinson.org" "Worst blog ever" >}}

Mark

layouts/shortcodes/mark.html

<mark>{{ .Inner }}</mark>

{{< mark >}}Highlighted{{< /mark >}} Text.

Highlighted Text.

Kbd

layouts/shortcodes/kbd.html

<kbd>{{ index .Params 0 }}</kbd>

Press {{< kbd "Alt+F4" >}} to active the destruct sequence.

Press Alt+F4 to active the destruct sequence.

Notice

layouts/shortcodes/notice.html

<p class="notice">{{ .Inner | markdownify}}</p>

{{< notice >}}It's important to draw your attention to this thing.{{< /notice >}}.

It’s important to draw your attention to this thing.

Aside

<aside>{{ .Inner }}</aside>

{{< aside >}}A small anecdote about something referenced in the text proper. {{< /aside >}}

A very important discussion about something very serious. You do not want to distract the reader from the main thrust of your point by including trivialities here.

A very important discussion about something very serious. You do not want to distract the reader from the main thrust of your point by including trivialities here.

Section

<section>{{ .Inner | markdownify }}</section>

{{< section >}}

### Title

Some section content

{{< /section >}}