Skip to main content

Shortcodes

Shortcodes are written in the Handlebars template language. They are similar to partials in that they are reusable blocks of HTML, the difference being that partials are referenced in templates and shortcodes are referenced in Markdown files.

Shortcodes come in two variants, inline and block.

Inline shortcodes​

Inline shortcodes look like:

{{%shortcode/%}}

Block shortcodes​

Block shortcodes can contain content and other shortcodes within them. They must always have open and closing tags on their own lines. Block shortcodes look like:

{{%shortcode%}}
Content
{{%/shortcode%}}

Use the content variable in a shortcode's Handlebars template to access the nested content within a shortcode, e.g.:

<div class="shortcode">
  {{&content}}
</div>

WARNING: block shortcodes do not work on a single line, e.g.:

<!-- This is invalid. -->
{{%shortcode%}}Content{{%/shortcode%}}

Shortcode attributes​

Single value attributes​

Attributes can be passed to inline shortcodes and the opening tags of block shortcodes:

{{%shortcode key="value"/%}}
{{%shortcode key="value"%}}
Content
{{%/shortcode%}}

Use the params variable in a shortcode's Handlebars template to access the attributes, e.g.:

<div id="{{params.id}}" class="shortcode">
  {{&content}}
</div>

Array attributes​

To pass an array to a shortcode, use the same attribute name multiple times, e.g.:

{{%shortcode key="one" key="two"/%}}

This will create the following array on the params variable:

{
  "params": {
    "key": ["one", "two"]
  }
}

Use the #each block in Handlebars to loop over the key array:

<ul>
  {{#each params.key}}
    <li>{{&this}}</li>
  {{/each}}
</ul>