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.
The quick brown fox jumps over the lazy dog
React, Angular, and Blazor are popular UI frameworks
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.Default: partial matches included
highlight highlighting highlightedWhole word: only standalone "highlight"
highlight highlighting highlightedBlazor 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.
The quick brown fox jumps over the lazy dog
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>. |