Highlighter

RzHighlighter decorates inline text with rough, animated highlight or underline effects. It keeps content SSR-first and semantically normal while Alpine (x-data="rzHighlighter") handles client-side drawing.

Under the Hood

The text is always server-rendered and readable without JavaScript. When JS is available, the Alpine instance loads annotation assets from ComponentAssetKeys and draws the effect around the x-ref="target" content span.

Basic Usage

Source

Build delightful copy with <RzHighlighter>small visual emphasis</RzHighlighter> in a sentence.

Underline Action

Source

Use an <RzHighlighter Action="HighlighterAction.Underline" Color="#ff9800">animated underline</RzHighlighter> when a filled highlight feels heavy.

Color and Timing Customization

Source

<RzHighlighter Color="var(--highlight-3)" StrokeWidth="1.2" AnimationDuration="500">Gentle and quick</RzHighlighter>
<RzHighlighter Color="var(--highlight-4)" StrokeWidth="2" AnimationDuration="900" Iterations="3">Bold and expressive</RzHighlighter>

Start On View

Source

<RzHighlighter StartOnView="true" ViewMargin="-15%">This text animates when visible.</RzHighlighter>

Multiline Text

Source

<RzHighlighter Multiline="true">
    Multiline highlighting works for wrapped prose, but keep spans short so decoration remains legible.
</RzHighlighter>

Integration in Rich Typography

Source

<RzParagraph>
    Combine <RzHighlighter Color="var(--highlight-2)">inline emphasis</RzHighlighter> with your normal typography flow, and reserve
    <RzHighlighter Action="HighlighterAction.Underline" Color="#f97316">strong accents</RzHighlighter> for key phrases.
</RzParagraph>

Hightlight Color Variables

The following CSS 5 color variables have light and dark mode equivalents and can be used in any of the highlighters. For example, if you want to use `highlight-1` then pass `var(--highlight-1)` as the color parameter variable.

Color	Variable Name
	`--highlight-1`
	`--highlight-2`
	`--highlight-3`
	`--highlight-4`
	`--highlight-5`

Component Parameters

Property	Type	Default
`ChildContent`	`RenderFragment?`	`null`
`Action`	`HighlighterAction`	`Highlight`
`Color`	`string?`	`var(--highlight-1)`
`StrokeWidth`	`double`	`1.5`
`AnimationDuration`	`int`	`600`
`Iterations`	`int`	`2`
`Padding`	`int`	`2`
`Multiline`	`bool`	`true`
`StartOnView`	`bool`	`false`
`ViewMargin`	`string?`	`-10%`
`ComponentAssetKeys`	`string[]`	`["RzHighlighterCoreScript"]`

Alpine API

Key	Value	Purpose
`x-data`	`rzHighlighter`	Initializes the internal Alpine module.
`x-ref`	`target`	Annotation target element.
`data-*`	`action/color/stroke-width/...`	Server-emitted config read by Alpine.

This component has no public events. It is safe in HTMX-updated regions because it initializes from rendered attributes on each load.