Highlight PRE hover

by Kushal Jayswal

HTML

<pre id="raw">
Some lines
of raw text
to test
</pre>

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP4/x8AAwAB/2+Bq7YAAAAASUVORK5CYII=" onload="PreHover()" />

CSS

#raw {
    padding: 1em;
    line-height: 150%;
}
#raw div:hover {
    background: #ff0;
}

JavaScript

function PreHover() {
    var output = '';
    var htm = document.getElementById('raw').innerHTML;
    var txt = htm.split('\n');
    for (var x = 0; x < txt.length - 1; x++) {
        output = output + '<div>' + txt[x] + '</div>';
    }
    document.getElementById('raw').innerHTML =  output;
}