---
title: Mark
description: Highlighted text mark
visibility: guest
draft: false
---

# Mark

A static text-highlight wrapper that renders a styled `<mark>` element. Uses a warm background color for visual emphasis.

> **Mark vs. Highlight:** [`<x-wirekit::mark>`](/components/mark) wraps text the **author** chose to highlight — you decide where the `<mark>` goes. [`<x-wirekit::highlight>`](/components/highlight) takes a `query` prop and **dynamically** wraps every occurrence of the query inside the slot — for search-result highlighting where matching positions are runtime-determined. Use Mark for editorial emphasis, Highlight for query/search-match rendering.

## Basic Usage

:::preview{title="Highlighted text"}
<x-wirekit::text>
    This is <x-wirekit::mark>important text</x-wirekit::mark> that should stand out.
</x-wirekit::text>
:::

## Multiple Highlights

:::preview{title="Multiple marks in text"}
<x-wirekit::text>
    We support <x-wirekit::mark>Laravel</x-wirekit::mark>, <x-wirekit::mark>Livewire</x-wirekit::mark>, and <x-wirekit::mark>Tailwind CSS</x-wirekit::mark>.
</x-wirekit::text>
:::

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `scope` | string\|null | `null` | Scoped personalization name |

## Keyboard Interaction

This component is purely presentational and does not respond to keyboard input.

## Design Tokens

| Token | Used for |
| --- | --- |
| `--color-wk-warning-bg` | Highlight background (warm yellow) |
| `--color-wk-text` | Text color |
| `--radius-wk-sm` | Border radius |