JSFiddle - React, Tailwind, and code Playground

by Paulpro

HTML

<pre id="thepre">
    There is more than one line in here.
    There is more than one line in here.
    There is more than one line in here.
    There is more than one line in here.
    There is more than one line in here.
    There is more than one line in here.
</pre>

CSS

#thepre{
    display: block;   
}

JavaScript

(function(){
    
    var pre = document.getElementById('thepre');
    var lh;
    if(pre.currentStyle)
        lh = pre.currentStyle['line-height'];
    else if(window.getComputedStyle)
        lh = window.getComputedStyle(pre,null).getPropertyValue('line-height');
    
    pre.onmousemove = function(e){
        var y = e.pageY - this.offsetTop;
        for(var i = 0; i < Math.ceil(this.offsetHeight/lh); i++)
            removeClass(pre, 'hover-line-'+i);
        addClass(pre, 'hover-line-'+Math.round(y/lh+1));
    }
            
})();
    
function addClass(el, c){
    if(c.indexOf(' ') >= 0)
        return false;
    if(hasClass(el, c))
        return true;
    el.className += ' '+c;
    return true;
}

function removeClass(el, c){
    if(c.indexOf(' ') > -1)
        return false;
    if(!hasClass(el, c))
        return true;
    var elc = (' '+el.className).replace(' '+c, '');
    if(elc.indexOf(' ') == 0)
        elc = elc.substring(1);
    el.className = elc;
    return true;
}

function hasClass(el,c){
    var elc = ' '+el.className+' ';
    if(elc.indexOf(' '+c+' ') < 0)
        return false;
    return true;    
}