Highlight web content

Whenever i read something from my feed reader that i like or want to share, i tend to highlight some parts to quote in my stream section.

I used to read all the article and when i have finished it, reread looking for the parts that i liked. This was inefficient as i had to read the same thing twice.

Thats when another bookmarklet was born. Select some text that you like, and click it to highlight it.

It works by getting the bounding box of the current selection and making an overlay div there. As it takes the position when calling it, if content is added or shifted afterwards, the highlight will be broken. But for highlighting content to reference in a few minutes or hours works for my case. It also doesnt persist it, so try no to close the article. Or maybe it could be made into a lean browser extension.

As always, here is the code if you want to call it from your devtools or however you run this things. It uses a yellow overlay, but you can change it modifying the rgba(255,255,0,.3) part.

[...window.getSelection().getRangeAt(0).getClientRects()]
    .map( e => {
        const a = document.createElement("mark");
        a.style.position = "absolute";
        a.style.pointerEvents = "none";
        a.style.background = "rgba(255,255,0,.3)";
        a.style.left= (e.left+document.documentElement.scrollLeft)+"px";
        a.style.top = (e.top+document.documentElement.scrollTop)+"px";
        a.style.height = e.height+"px";
        a.style.width = e.width+"px";
        return a;
    })
    .forEach(d => { document.body.appendChild(d); });

Another option is to add this Highlight bookmarklet to your bookmarks and just click it.