ngx-html-highlighter

A full page html text highlighter for Angular

Usage no npm install needed!

<script type="module">
  import ngxHtmlHighlighter from 'https://cdn.skypack.dev/ngx-html-highlighter';
</script>

README

Angular Html Highlighter

Highlight strings of text across the entire page, regardless of application, library or component boundaries.

Usage

  • Install the library in your package.json for example using npm i --save ngx-html-highlighter.
  • Add the NgxHtmlHighlighterModule.forRoot() to your module's imports section. The forRoot is necessary for the service to be available (see next item).
  • Inject the HighlighterService in your module or component.
  • Call createHighlighter with an optional options argument to create a highlighter object. The highlighter begins its work immediately.
  • Important: When no longer needed call destroy on the highlighter object or alteratively pass the highlighter to the service's destroyHighlighter method.

Options

export interface Options {
  tagAttribute: string;
  highlightClass: string;
}
  • tagAttribute is the attribute name used to "tag" a node as having been inserted by the highlighter.
  • highlightClass is the class added to the highlighted spans. You should add styles to this class in your global stylesheets (e.g. src/app/styles.css in a default angular app)