ComponentsData display
Highlighter
MudHighlighter wraps the parts of a text that match a search in mark elements. Use it to show why a result matched, in search results, filters and long passages.
Search as you type
Bind HighlightedText to an immediate text field and every match in the passage is marked while you type.
The Lantern Street bookshop keeps its maps in the back room, beside the reading lamps. Old maps of the harbour sell quickly; maps of the hill villages sit for months. On Thursdays the shop stays open late, and the owner reads aloud from a travel book chosen by the last customer of the week.
Several fragments at once
HighlightedTexts accepts a list. Toggle the terms to mark several words in one pass.
Mix the flour with most of the water and leave it for an hour. Add the starter and the salt with the rest of the water, then fold the dough every half hour. Shape it, let it rise overnight in the fridge, and bake it in a hot oven with a lid for the first twenty minutes. A dusting of flour on top makes the score stand out.
Case sensitivity and word boundaries
CaseSensitive restricts matches to the exact case. UntilNextBoundary extends each match to the end of the word, so 'star' marks the whole of 'starlight'.
Star parties begin at dusk. Bring a starter guide to the stars, a flask of tea and patience: the North Star is easy, but faint starlight needs twenty minutes of dark adaptation.
Highlighted search results
A filtered list where each result shows its match. Class and Style restyle the mark elements to suit the surface.
Riverside
RiversideRiver Gardens
RiversideText that contains markup
Markup renders the text as HTML and highlights inside it. Use it only with trusted text that you wrote, never with user input.
The Saturday market stall opens at eight. Pre-ordered loaves wait in the blue crates under the counter.