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 />
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. | |