# Highlight

`{% highlight %}` is a **built-in** tag that **scans a run of text and
highlights every match** of one or more substrings. Give the term(s) to find and the text to
search, and each match is wrapped in a tinted `<mark>`. The text is the block body or a `text`
param; it's treated as plain text, so substring matching is reliable.

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

## Demonstrations

### Single term

Give the substring to find in `highlight`; every occurrence in the body is marked.

Write Markdown, get a site. Markdown in, HTML out.

<br>

Source: Markdown

```aardvark
{% highlight highlight='Markdown' %}Write Markdown, get a site. Markdown in, HTML out.{% endHighlight %}
```


Source: Python

```python
component('aardvark', 'highlight', highlight='Markdown',
          children='Write Markdown, get a site. Markdown in, HTML out.')
```



### Multiple terms

Pass several comma-separated substrings in `highlight` and every match of any of them is
marked.

Aardvark is fast, simple, and static — a static-site generator.

<br>

Source: Markdown

```aardvark
{% highlight highlight='fast, simple, static' %}Aardvark is fast, simple, and static — a static-site generator.{% endHighlight %}
```


Source: Python

```python
component('aardvark', 'highlight', highlight=['fast', 'simple', 'static'],
          children='Aardvark is fast, simple, and static — a static-site generator.')
```



### Color and text styling

`color` tints the highlight; the Text typography props (`size`, `fw`, `c`, `ta`, `tt`, `td`,
`fs`) style the whole run.

Only the matched word is highlighted; the rest is styled text.

<br>

Source: Markdown

```aardvark
{% highlight highlight='matched' color='lime' fw=600 size='lg' %}Only the matched word is highlighted; the rest is styled text.{% endHighlight %}
```


Source: Python

```python
component('aardvark', 'highlight', highlight='matched', color='lime', fw='600', size='lg',
          children='Only the matched word is highlighted; the rest is styled text.')
```



### The text shortcut

For a one-liner, the `text` param is the plain-text alternative to the block body.

Add an id for CSS or JS hooks.

<br>

Source: Markdown

```aardvark
{% highlight highlight='id' text='Add an id for CSS or JS hooks.' id='hl-demo' color='grape' %}{% endHighlight %}
```


Source: Python

```python
component('aardvark', 'highlight', highlight='id', text='Add an id for CSS or JS hooks.',
          id='hl-demo', color='grape')
```



## With other components

Highlight pairs naturally with other typography built-ins — here it marks a term inside a
[Blockquote](/components/typography/blockquote/).




A static site is fast, a static site is cheap.




<br>

Source: Markdown

```aardvark
{% blockquote icon='search' color='cyan' %}
{% highlight highlight='static' color='cyan' %}A static site is fast, a static site is cheap.{% endHighlight %}
{% endBlockquote %}
```


Source: Python

```python
inner = component('aardvark', 'highlight', highlight='static', color='cyan',
                  children='A static site is fast, a static site is cheap.')
component('aardvark', 'blockquote', icon='search', color='cyan', children=inner)
```



## Attributes

| Attribute | Valid values | Description |
| --- | --- | --- |
| `text` | Any string | The text to search, used when there's no block body. |
| `highlight` | One phrase, or several comma-separated (tag); a string or list of strings (Python) | The substring(s) to highlight — every match is wrapped in a `<mark>`. |
| `color` | Any theme color (e.g. `lime`, `grape`, `cyan`) | Highlight tint. |
| `size` | `xs` `sm` `md` `lg` `xl` | Text size of the whole run. |
| `fw` | Font-weight value (e.g. `600`) | Font weight of the run. |
| `c` | Any theme color | Text color of the run. |
| `ta` | `left` `center` `right` `justify` | Text align. |
| `tt` | `uppercase` `lowercase` `capitalize` | Text transform. |
| `td` | `underline` `line-through` `none` | Text decoration. |
| `fs` | `italic` `normal` | Font style. |
| `id` | Any string | HTML `id` on the rendered element, for CSS / JS selectors. |

The text to search is the block body or the `text` param. It's plain text — Mantine searches
it character by character — so Markdown inside it is **not** formatted. For a single fixed
phrase you wrap by hand, [Mark](/components/typography/mark/) is simpler.

## CSS Selectors

Target the rendered element through its island marker, `[data-aardvark-island="Highlight"]`, or through the Mantine Styles API classes. Each matched substring is wrapped in a Mantine `Mark` (`.mantine-Mark-root`). The relevant classes:


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

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

/* Each highlighted substring */
.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:

Write Markdown, get a site. Markdown in, HTML out.

<br>

Source: Markdown

```aardvark
{% highlight highlight='Markdown' attr={'onclick': '''
const value = this.innerText;
console.log('attr demo value:', value);
alert(value);
'''} %}Write Markdown, get a site. Markdown in, HTML out.{% endHighlight %}
```


Source: Python

```python
component('aardvark', 'highlight', highlight='Markdown',
          children='Write Markdown, get a site. Markdown in, HTML out.', attr={'onclick': '''
const value = this.innerText;
console.log('attr demo value:', value);
alert(value);
'''})
```