Hightlight Content Selection For The Web – Web Highlighter

A pure JS web highlighter that makes it possible to highlight any content selection on the web.

How to use it:

Installation:

npm i web-highlighter

Build.

git clone [email protected]:alienzhou/web-highlighter.git
git checkout v0.3.2
npm i
npm run build

Import the web highlighter.

// global
var Highlighter = window.Highlighter;
// CommonJS
var Highlighter = require('highlighter');
// ES Module
import Highlighter from 'highlighter';

Initialize & enable the web highlighter.

var highlighter = new Highlighter();
highlighter.run();

Save & restore the highlighted content.

// get
getStore().then(s => highlighter.fromStore(s.startMeta, s.endMeta, s.id, s.text));
// store
highlighter.on(Highlighter.event.CREATE, ({sources}) => save(sources));

Possible options for the web highlighter.

var highlighter = new Highlighter({
    // root element
    $root: document.documentElement,
    // default: null
    exceptSelectors: ['img', 'code'],
    // CSS class for the highlighted content
    style: {
      className: 'highlight-mengshou-wrap'
    }
    
});

Apply your own styles to the highlighted content.

.highlight-mengshou-wrap {
  /* your styles here */
}

More API methods.

// stops the web highlighter
highlighter.stop();
// disposes the web highlighter
highlighter.dispose();
// removes selection
highlighter.remove(id);
// removes all selections
highlighter.removeAll();
// adds a CSS class to the selection
highlighter.addClass('your-class', id);
// removes the class
highlighter.removeClass('your-class', id);
// gets DOM
highlighter.getDoms(id);
// gets ID of the DOM
highlighter.getIdByDom($node);

Event listeners.

highlighter.on(Highlighter.event.CLICK, function (id) {
  // ...
});
highlighter.on(Highlighter.event.HOVER, function (id) {
  // ...
});
highlighter.on(Highlighter.event.HOVER_OUT, function (id) {
  // ...
});
highlighter.on(Highlighter.event.CREATE, function (source, type) {
  // ...
});
highlighter.on(Highlighter.event.REMOVE, function (ids) {
  // ...
});