Headless Mark - Phoenix & LiveView Component

Overview of the Phoenix and LiveView Headless Mark Component

The Mishka Chelekom Headless Mark wraps an inline run of text in a mark element. It has no JavaScript and no styling, so the highlight color is yours to set with Tailwind classes on class. Use it to flag text inside a sentence, such as a search hit or a changed word. It renders the same element in a Phoenix template and in a LiveView.

To highlight every match of a query inside a longer string, the Highlight component splits the text for you and wraps each match in a mark. Use Mark when you already know which words to wrap.

Base UI Mark example - highlighted words in a sentence (Phoenix headless)

The quick brown fox jumps over the lazy dog.

heex

<p class="max-w-sm text-sm text-neutral-700 dark:text-neutral-300">
  The quick brown
  <.mark class="rounded bg-yellow-200 px-0.5 text-neutral-900">fox</.mark>
  jumps over the lazy <.mark class="rounded bg-lime-200 px-0.5 text-neutral-900">dog</.mark>.
</p>

Attributes and the root element

Mark has one part, the root mark element, with the chelekom-mark class. It takes id, class and any global HTML attribute, such as title or a data-* attribute, and the text to highlight goes in the inner block. The inner block is required.

Accessibility

There is no WAI-ARIA pattern for mark. It is a native HTML element that marks text as relevant in another context, and Mark adds no roles or states. Screen readers differ in whether they announce it, so do not rely on the highlight color alone for meaning the reader needs. Say it in the surrounding text too, and keep enough contrast between the highlight and the text color.

Attributes

Name	Type	Default	Values	Required	Description
`id`	`string`	—	—	No	Optional unique id
`class`	`any`	—	—	No	Extra classes
`rest`	`global`	—	—	No	—

Slots

Name	Required	Description
`inner_block`	Yes	The text to highlight

Mark