Mark

A Text node cannot carry a background of its own, so a mark is a Text inside a tinted Box. You write it as a <MishkaMark> tag with the text to highlight. Mob Highlight builds on it, and keeping it in one module gives the whole app one highlight color.

The Box sets fill_width={false}, so the mark is as wide as its text. A Box given neither width nor fill_width fills its parent, and the mark would become a full-width bar instead of a highlighted word.

The default colors are explicit ARGB values, not theme tokens: an amber fill, 0xFFFDE68A, with dark ink, 0xFF111827. A highlight has to stay readable against itself, and a light fill with dark text does that in a light or a dark theme. A :surface and :on_surface pair flips with the theme and can end up light on light. The module exposes default_fill/0 and default_ink/0 so other components can match these colors.

Mark has no state and sends no events.

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

mix mishka.ui.gen.mob mark

The generator registers the tag, so you can use it in ~MOB markup. The examples on this page use the mishka_ prefix of the showcase app (--module-prefix mishka_), so the tag is <MishkaMark>. Without a prefix, the tag is <Mark>.

The mark is as wide as its text, so it hugs the word instead of filling the line.

Highlighted text

LTR RTL

Preview

Show the whole example Show less

<MishkaMark text="BEAM" />

Highlight applies one fill to every match. When each match means something different, build the line from marks and Text nodes directly.

A color per mark

LTR RTL

Preview

Show the whole example Show less

# This is what the mark exists for: Highlight's single background cannot
# say "red here, green there" — the web component has one mark_class too.
<Row>
  <MishkaMark text="Error" background={0xFFFECACA} />
  <Text text=": Invalid input. " />
  <MishkaMark text="Warning" background={0xFFFDE68A} />
  <Text text=": Check this field. " />
  <MishkaMark text="Success" background={0xFFBBF7D0} />
  <Text text=": All tests passed." />
</Row>

A mark sits inline beside ordinary text.

Mark in a sentence

LTR RTL

Preview

Show the whole example Show less

<Row>
  <Text text="Runs on the " />
  <MishkaMark text="BEAM" />
  <Text text=" itself." />
</Row>

The default pairs a light fill with dark ink, so it reads in either theme. Set background to change the fill.

Mark colors

LTR RTL

Preview

Show the whole example Show less

<MishkaMark text="shipped" background={0xFFBBF7D0} />

Props of the <MishkaMark> tag.

• Headless Mark, the web component this one ports.
• Mob Highlight, text with matching substrings marked.
• Mob Code, inline code and scrolling code blocks.
• Mob components, the full list of native components.