# Highlighter

Source: https://lumeo.nativ.sh/components/highlighter

# Highlighter

Wraps occurrences of one or more search terms within text with a highlight mark.

## When to Use

-   Visually mark search matches within a block of text or list of results.
-   Highlight keywords in a read-only preview or document viewer.
-   Combine with a search input to give real-time match feedback.

Preview Code

Single Term

The quick brown fox jumps over the lazy dog

Copy Code

Preview Code

Multiple Terms

React, Angular, and Blazor are popular UI frameworks

Copy Code

Preview Code

Case Sensitive

Case-insensitive (default): matches "blazor" → highlights "Blazor"

Blazor is awesome. blazor runs on .NET.

Case-sensitive: only exact "Blazor" matched

Blazor is awesome. blazor runs on .NET.

Copy Code

Preview Code

Whole Word

Default: partial matches included

highlight highlighting highlighted

Whole word: only standalone "highlight"

highlight highlighting highlighted

Copy Code

Preview Code

Interactive Search

Blazor is a free and open-source web framework that enables developers to create web apps using C# and HTML. Blazor uses .NET for server-side code and WebAssembly for client-side code, allowing C# code to run directly in the browser.

Copy Code

Preview Code

Custom Highlight Style

The quick brown fox jumps over the lazy dog

Copy Code

## Keyboard Interactions

Key

Action

Highlighter is a display-only component and has no keyboard interactions.

## API Reference

### Highlighter

Property

Type

Default

Description

Text

string

""

The source text to render and search within.

Highlight

string?

null

A single term to highlight. Combined with HighlightTerms.

HighlightTerms

IEnumerable<string>?

null

Multiple terms to highlight. Longest match wins when terms overlap.

CaseSensitive

bool

false

Perform case-sensitive matching.

WholeWord

bool

false

Only match whole words (adds word boundary anchors).

HighlightClass

string?

null

Extra CSS classes applied to the <mark> element. Default style: bg-warning/30 text-foreground rounded-sm px-0.5.

Tag

string

"mark"

HTML element used to wrap matches. Defaults to <mark>.

## Related Components

-   [Command](/components/command) — Command palette with built-in search highlighting.
-   [Input](/components/input) — Use as the search input driving the highlight term.