+++ title = "shortcodes" date = 2026-04-20 description = "reusable template snippets you can call from markdown" [taxonomies] tags = ["zola", "shortcodes", "demo"] +++

zola supports shortcodes — reusable template snippets you can call from markdown. they live in templates/shortcodes/ and come in two flavors: inline and body.

callout boxes

{% warning() %} this is a warning callout. useful for highlighting important caveats or breaking changes. {% end %}

{% note() %} this is an informational note. good for tips and supplementary context. {% end %}

collapsible sections

{% details(summary="click to expand") %} this content is hidden by default. useful for long examples, FAQs, or optional details that would otherwise break reading flow.

you can put any markdown here — code, lists, links. {% end %}

how shortcodes work

shortcodes are tera templates in templates/shortcodes/. a shortcode named warning.html is called with:

{%/* warning() */%}
body text here
{%/* end */%}

inline shortcodes (no body) use double braces:

{{/* figure(src="photo.jpg", caption="a photo") */}}

creating your own

any .html file in templates/shortcodes/ becomes available. the file receives body (for body shortcodes) and any named arguments as template variables.

<!-- templates/shortcodes/warning.html -->
<div class="warning">
  <strong>Warning:</strong> {{ body }}
</div>