Highlight

Highlight is a pure Elixir Mob composite. You write it as a <MishkaHighlight> tag with the full text and one or more highlight queries. It splits the text on the queries and renders the pieces in a Row. Plain runs are Text nodes, and matched runs go through Mob Mark.

Matching works like the web component. You can pass several queries, empty and nil queries are ignored, and a matched run renders with the casing it has in the text, not the casing you typed. Matching ignores case unless you set case_sensitive={true}.

Highlight has no state and sends no events. To follow a query as it changes, pass the query from your assigns.

Mob's Text takes one string and exposes no span API, so a partly highlighted sentence is several nodes in a Row, and a Row does not wrap. That suits short strings such as a search result title or a filename. For a sentence, set wrap_at. It is a character budget per line, which the parts are packed into before rendering. You declare it because the component gets no layout size back at render time.

Breaks land after whitespace, so a wrapped line never begins with a space. A mark is never split across lines. A mark wider than the budget takes a line of its own. Leave wrap_at unset and you get a single Row.

One background applies to every match. For a line where each match has its own color, such as an Error in red beside a Success in green, compose Mob Mark and Text directly.

Run this from your Mob app's root to add the component to lib/<app>/components/:

mix mishka.ui.gen.mob highlight

The generator registers the tag, so you can use it in ~MOB markup. Highlight builds its marked runs from Mark, so the generator also generates mark, with the same prefixes. The examples on this page use the mishka_ prefix of the showcase app (--module-prefix mishka_), so the tag is <MishkaHighlight>. Without a prefix, the tag is <Highlight>.

One query marks all three occurrences. Each one renders with the casing it has in the text, not the casing you searched for. Here wrap_at={34} wraps the sentence at 34 characters per line.

Every occurrence, whatever its casing

LTR RTL

Preview

Show the whole example Show less

<MishkaHighlight
  text="Highlight This, definitely THIS and also this!"
  highlight="this"
  wrap_at={34}
/>

Matching ignores case by default. Set case_sensitive={true} to mark only the exact casing, which here is just the lowercase this.

Case sensitivity in highlight

LTR RTL

Preview

Show the whole example Show less

<MishkaHighlight text="Highlight This, definitely THIS and also this!" highlight="this" />

<MishkaHighlight
  text="Highlight This, definitely THIS and also this!"
  highlight="this"
  case_sensitive={true}
/>

Pass the query from your assigns and the marks follow it. In the showcase, four buttons (che, beam, nativ and o) change the query when you tap them.

Highlight that follows a query

LTR RTL

Preview

Show the whole example Show less

<MishkaHighlight text="Mishka Chelekom" highlight={@query} />

Pass a list to mark more than one substring.

Highlight with several queries

LTR RTL

Preview

Show the whole example Show less

<MishkaHighlight text="one two three" highlight={["one", "three"]} />

A Row does not wrap, so wrap_at sets a character budget per line. Without it, a long sentence runs off the edge of the screen. Breaks land after whitespace, and a mark is never split across lines.

Wrapping a highlighted sentence

LTR RTL

Preview

Show the whole example Show less

# Breaks land after whitespace, and a mark is never split across lines.
<MishkaHighlight text={@sentence} highlight={["BEAM", "natively"]} wrap_at={30} />

An empty, nil or unmatched query leaves the text plain.

Highlight with no match

LTR RTL

Preview

Show the whole example Show less

<MishkaHighlight text="nothing to mark" highlight="" />

background and color tint the marks. text_color colors the rest of the text.

Highlight colors

LTR RTL

Preview

Show the whole example Show less

<MishkaHighlight text="…" highlight="beam" background={0xFFBBF7D0} />

Props of the <MishkaHighlight> tag.

• Headless Highlight, the web component this one ports.
• Mob Mark, the single highlighted word that Highlight builds on.
• Mob Code, inline code and scrolling code blocks.
• Mob components, the full list of native components.