Tera components

Zola 0.23 renders page and section bodies as Tera 2 templates before Markdown. DevLab exposes its content building blocks as global devlab.* components: they need no import and cannot collide with generic names from your site.

Component syntax

Self-closing components render inline:

{{<devlab.icon name="github" />}}

Components that accept Markdown use an opening and closing tag:

{% <devlab.callout type="info" title="Good to know"> %}
The body supports **Markdown**.
{% </devlab.callout> %}

Arguments written as strings use quotes. Pass variables and non-string literals as Tera expressions in braces, for example item={page} or enabled={true}.

Code blocks

Markdown fenced code blocks are styled automatically. If a language is provided, the header shows it and includes a Copy button when the Clipboard API is available. Copy success and failure are also announced through a polite live region.

```toml
theme = "devlab-theme"
compile_sass = true
```

theme = "devlab-theme"
compile_sass = true

Add linenos for line numbers and hl_lines for individual lines or ranges:

```rust,linenos,hl_lines=2
fn main() {
    println!("this line is highlighted");
    println!("this one is not");
}
```

1fn main() {
2    println!("this line is highlighted");
3    println!("this one is not");
4}

These annotations are native Zola highlighting features. DevLab styles them and strips line numbers when copying.

Cards

Cards can link to another resource or present standalone information.

{% <devlab.card title="Fast setup" href="@/docs/getting-started/_index.md"> %}
Start building your documentation site with Zola.
{% </devlab.card> %}

Omit href for a static card:

Callouts

Callouts support info, warning, error, and tip variants.

{% <devlab.callout type="tip" title="Fast feedback"> %}
Use `zola serve` while writing.
{% </devlab.callout> %}

Details

Details hide supplementary Markdown behind the browser's native, no-JavaScript disclosure widget.

{% <devlab.details summary="What Zola version do I need?"> %}
DevLab Theme requires Zola `0.23.1` or newer.
{% </devlab.details> %}

The required summary argument is the always-visible label.

Steps

Steps turn a Markdown ordered list into a connected walkthrough.

{% <devlab.steps> %}
1. Install Zola.
2. Add the theme.
3. Run `zola serve`.
{% </devlab.steps> %}

devlab.steps takes no arguments. Each top-level list item becomes one step; nested Markdown remains available inside it.

Icons

DevLab ships a small SVG library and exposes it through devlab.icon.

GitHub Codeberg Matrix

GitHub {{<devlab.icon name="github" />}}

Icons are decorative by default. Add label when an icon communicates meaning without adjacent text.

Available names:

• Theme: sun, moon
• Social and brand: github, gitlab, codeberg, matrix, zulip, telegram, discord, rss, email, link
• Interface: search, chevron-right, external-link, copy, check, info, warning, menu, x, arrow-left, arrow-right

Use an icon from a template

The lower-level SVG component is also global:

<a href="https://github.com/you" aria-label="GitHub">
  {{<devlab.svg_icon name="github" />}}
</a>

To extend the set, add an SVG fragment under templates/components/icons/ and a matching branch in templates/components.html. Keep filenames lowercase and add an accessible label at the wrapper level when the icon is not decorative.

Literal Tera in Markdown

Zola 0.23 templates all Markdown content, including fenced code blocks. Wrap examples that must be displayed rather than executed in a Tera raw block:

{% raw %}
```jinja
{{<project.example value="literal" />}}
```
{% endraw %}

For files that should never execute Tera, add their paths to skip_content_templating in zola.toml. Do not disable templating on pages that use DevLab components.