web-marker
A web page highlighter that features
- accurate serialization and deserialization which makes it possible to correctly restore the highlights, even if part of the web page has changed
- nested highlighting
- no runtime-dependency
How to run
git clone https://github.com/notelix/web-marker
cd web-marker
npm i
npm startHow to use
npm install @notelix/web-marker
import {Marker} from "@notelix/web-marker"
const marker = new Marker({
rootElement: document.body,
eventHandler: {
onHighlightClick: (context, element) => {
marker.unpaint(context.serializedRange);
},
onHighlightHoverStateChange: (context, element, hovering) => {
if (hovering) {
element.style.backgroundColor = "#f0d8ff";
} else {
element.style.backgroundColor = "";
}
}
},
highlightPainter: {
paintHighlight: (context, element) => {
element.style.color = "red";
}
}
});
marker.addEventListeners();
document.addEventListener('mouseup', (e) => {
const selection = window.getSelection();
if (!selection.rangeCount) {
return null;
}
const serialized = marker.serializeRange(selection.getRangeAt(0));
console.log(JSON.stringify(serialized));
marker.paint(serialized);
})How to build library
npm run build-lib
npm pack
Built with web-marker
- notelix/notelix: An open source web note taking / highlighter software (chrome extension with backend)