ngx-astro-highlighter

Text highlighter effect for Astro. A zero-runtime port of @omnedia/ngx-highlighter to Astro components — no Angular dependency.

Wraps text with animated highlights, underlines, boxes, circles, and more — powered by rough-notation.

Features

• Pure Astro component (.astro), no Angular runtime.
• Wraps rough-notation.
• Instances get unique ids, so you can use several on the same page.
• Animation pauses when off-screen (IntersectionObserver), same as the original.

Installation

npm install ngx-astro-highlighter

Usage

---
import Highlighter from 'ngx-astro-highlighter';
---

<Highlighter color="#f59e0b">highlighted text</Highlighter>

Props

| Prop | Default | | -------------------- | ---------------------------------------------------------- | | action | 'highlight' (highlight, underline, box, circle, strike-through, crossed-off, bracket) | | color | '#d1daff' | | strokeWidth | 1.5 | | animationDuration | 600 | | iterations | 2 | | padding | 2 | | multiline | true | | brackets | ['left', 'right'] | | animateOnlyOnce | false | | animate | true |

All components accept class for additional styling.

License

MIT. Original effect © Omnedia (MIT).