Shortcodes

Shortcodes let you use reusable template snippets inside Markdown content.

In Thulite, shortcode templates live in layouts/_shortcodes/ and are called from page content with Hugo shortcode syntax.

Use shortcodes in Markdown#

Examples used in this project:

{{< preview >}}

### Example output

This block is rendered as a preview.
{{< /preview >}}

{{< link-card src="svgs/simple-icons/hugo.svg" title="Hugo Docs" href="https://gohugo.io/" >}}

Contact: {{< email "hello@example.com" >}}

Create a custom shortcode#

Create a template in layouts/_shortcodes/.

Example file: layouts/_shortcodes/note.html

<div class="callout callout-info">{{ .Inner | markdownify }}</div>

Use it in Markdown:

{{< note >}}
Use shortcodes when plain Markdown is not enough.
{{< /note >}}

Keep shortcodes focused and reusable. If logic becomes complex, move it to a partial and call that from the shortcode.

Learn more#