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> wraps text the author chose to highlight — you decide where the <mark> goes. <x-wirekit::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

<x-wirekit::text>
    This is <x-wirekit::mark>important text</x-wirekit::mark> that should stand out.
</x-wirekit::text>

Multiple Highlights

<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

Keyboard Interaction

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

Design Tokens