Code

The built-in code tag — inline or block code rendered verbatim with the Mantine Code element, with an optional background tint. Usage, options, and live examples.

{% code %} is a built-in tag for code styling. It shows its content verbatim — no Markdown, no syntax highlighting: by default an inline <code> run for a short token mid-sentence, or a standalone block with block. For highlighted, multi-line source, use a fenced ``` code block instead; reach for this tag when you want a styled token inline or a quick tinted block.

Use it as {% code %} in Markdown, or call it from Python logic (loops, snippets) via component('aardvark', 'code', …).

Demonstrations

Inline (the default)

By default {% code %} is inline — it sits in a sentence without breaking the paragraph. The code is the block body, or the inline code param.

Run npm install aardvark to get started.

Block

Add block for a standalone, padded <pre>-style block instead of an inline run.

export AARDVARK_KEY=aardvark_live_…

Color

color tints the background — handy for a positive / negative cue.

200 OK 404 Not Found

Verbatim content

The content is shown literally — angle brackets and ampersands read as themselves, and Markdown is not processed.

<Component prop="value" />

With other components

Inline code reads naturally inside other built-ins — here a status token inside a Blockquote, and a tinted token in a List item.

Attributes

The code is the block body or the code param; either way it’s shown literally (no Markdown, no syntax highlighting). For highlighted, multi-line source, use a fenced ``` code block — it gets the site’s full syntax highlighting, which {% code %} (verbatim by design) does not.

CSS Selectors

Target the rendered element through its island marker, [data-aardvark-island="Code"], or through the Mantine Styles API classes:

/* Every rendered Code carries this island marker */
[data-aardvark-island="Code"] { }

/* Mantine Styles API classes */
.mantine-Code-root { }

Injecting Attributes

attr={…} forwards raw HTML attributes — including event handlers — straight onto the rendered element, so you can wire DOM behavior the tag does not expose. The handler can be a full multi-line script, not just one expression — this one logs the value to the console and shows it in an alert:

Run npm install aardvark to get started.