Highlight

Renders a text element that scans its children string for matches against the highlight prop and wraps each match in a styled <mark> element. Matching is case-insensitive.

Single term

Davaux is a SSR-first JSX framework for building web applications.

<Highlight highlight="Davaux">
  Davaux is a SSR-first JSX framework for building web applications.
</Highlight>

Multiple terms

Davaux features SSR-first rendering, file-based routing, and reactive signals.

<Highlight highlight={['SSR', 'routing', 'signals']}>
  Davaux features SSR-first rendering, file-based routing, and reactive signals.
</Highlight>

Custom color

Davaux is a SSR-first framework with file-based routing.

Davaux is a SSR-first framework with file-based routing.

Davaux is a SSR-first framework with file-based routing.

<Highlight highlight="framework" color="blue">
  Davaux is a SSR-first framework with file-based routing.
</Highlight>

As a different element

This is a heading with highlighted text

<Highlight highlight="heading" component="h3">
  This is a heading with highlighted text
</Highlight>

Props

PropTypeDefaultDescription
highlightstring|string[]—Substrings to find and highlight (required)
colorstring—Background color applied to matched substrings
componentstring'p'HTML wrapper element tag
classstring—Additional CSS class names
styleobject—Inline styles
childrenstring—Plain text to render with highlights (required)