Highlighter
Wraps occurrences of one or more search terms within text with a highlight mark.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <Highlighter />
Tested
Tier 1 · Render + props
all components → Render Behavior A11y Keyboard Scale E2E
15 tests across 1 file. Auto-generated from the test suite.
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
Order IDs: A-1024, B-2048, C-4096 shipped today
Wrap matches in a custom element instead of mark
Keyboard Interactions
| Key | Action |
|---|---|
Highlighter is a display-only component and has no keyboard interactions. | |
API Reference
Highlighter
| Prop | Type | Default | Description |
|---|---|---|---|
| Text | string | "" | The full source text to render; matched terms are wrapped in Tag, the rest is emitted verbatim. |
| Highlight | string? | — | A single term to highlight within Text. Combined with HighlightTerms when both are set (de-duplicated, longest match wins). |
| HighlightTerms | IEnumerable<string>? | — | Multiple terms to highlight within Text. Combined with Highlight when both are set (de-duplicated, longest match wins). |
| CaseSensitive | bool | false | Matches terms case-sensitively. Defaults to false (case-insensitive matching). |
| WholeWord | bool | false | Only matches terms on word boundaries (anchored with \b on sides adjacent to a word character), so e.g. "cat" won't match inside "category". Ignored when RegexMode is enabled. |
| RegexMode | bool | false | Treat Highlight / HighlightTerms as regular- expression patterns instead of literal text (the default). Invalid patterns fall back to rendering the text un-highlighted. WholeWord is ignored in this mode — express boundaries in the pattern itself. (#293) |
| HighlightClass | string? | — | Additional CSS classes appended to the built-in highlight-mark styling (bg-warning/30 text-foreground rounded-sm px-0.5) on each matched segment. |
| Tag | string | "mark" | Element name used to wrap each matched segment. Defaults to "mark"; falls back to "mark" if set to whitespace/empty. |
| Class | string? | — | Additional CSS classes merged onto the outer <span> wrapper. |
| AdditionalAttributes | Dictionary<string, object>? | — | Captures unmatched attributes and applies them to the outer <span> wrapper. |