Mark

The built-in mark tag — a tinted highlighted text run (the Mantine Mark element) for drawing the eye to a phrase mid-sentence. Usage, options, and live examples.

{% mark %} is a built-in tag for highlighted text — a tinted <mark> run you drop mid-sentence to draw the eye to a phrase. It’s always inline, so it flows with the surrounding text. The highlighted text is the block body (inline Markdown) or a plain-text text param.

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

Demonstrations

Inline highlight

Drop {% mark %} mid-sentence to tint a phrase; it flows with the surrounding text.

Aardvark turns Markdown into a static site.

Color

color takes any theme color; it defaults to yellow.

yellow lime cyan pink

Markdown content and the text shortcut

The block body renders inline Markdown, so you can format inside the run. A text param is the plain-text shortcut.

A bold word and a token

With other components

Because Mark is inline, it nests cleanly inside other built-ins — here it tints a word inside a List item and a Blockquote.

Mark vs Highlight

Use {% mark %} for a fixed phrase you wrap by hand. To highlight every occurrence of a substring inside a longer passage, reach for Highlight instead — it scans the text and marks each match for you.

Attributes

The highlighted text is the block body (inline Markdown — **bold**, `code`, [links]) or the text param.

CSS Selectors

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

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

/* Mantine Styles API classes */
.mantine-Mark-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:

Aardvark turns Markdown into a static site.