1+++
2title = "shortcodes"
3date = 2026-04-20
4description = "reusable template snippets you can call from markdown"
5[taxonomies]
6tags = ["zola", "shortcodes", "demo"]
7+++
8
9zola supports [shortcodes](https://www.getzola.org/documentation/content/shortcodes/) — reusable template snippets you can call from markdown. they live in `templates/shortcodes/` and come in two flavors: inline and body.
10
11## callout boxes
12
13{% warning() %}
14this is a warning callout. useful for highlighting important caveats or breaking changes.
15{% end %}
16
17{% note() %}
18this is an informational note. good for tips and supplementary context.
19{% end %}
20
21## collapsible sections
22
23{% details(summary="click to expand") %}
24this content is hidden by default. useful for long examples, FAQs, or optional details that would otherwise break reading flow.
25
26you can put any markdown here — code, lists, links.
27{% end %}
28
29## how shortcodes work
30
31shortcodes are tera templates in `templates/shortcodes/`. a shortcode named `warning.html` is called with:
32
33```markdown
34{%/* warning() */%}
35body text here
36{%/* end */%}
37```
38
39inline shortcodes (no body) use double braces:
40
41```markdown
42{{/* figure(src="photo.jpg", caption="a photo") */}}
43```
44
45## creating your own
46
47any `.html` file in `templates/shortcodes/` becomes available. the file receives `body` (for body shortcodes) and any named arguments as template variables.
48
49```html
50<!-- templates/shortcodes/warning.html -->
51<div class="warning">
52  <strong>Warning:</strong> {{ body }}
53</div>
54```