JSFiddle - React, Tailwind, and code Playground

by Aaron von Schassen

HTML

<pre onkeyup="setLineColor();" onmouseup="setLineColor();" contenteditable="true">
line 1
line 2
line 3
line 4
line 5
</pre>

<p></p>

CSS

* {
  margin: 0;
  padding: 0;
}

textarea {
  height: 200px;
  width: 500px;
}

.usapw {
  width: 100%;
  background: red;
}

JavaScript

function setLineColor() {
    var sel = document.getSelection(),
        nd = sel.anchorNode,
        untext = nd.textContent,
        text = nd.textContent.slice(0, sel.focusOffset),
				line = text.split("\n").length,
        array = untext.split("\n"),
        i,
        savecode;
        
        savecode = array;
        
        $("pre").html(savecode);
    
    $("p").text("Ausgewählte Zeile: "+line);    

		for (i = 0; i < array.length -1; ++i) {
    	array[i] = array[i] + "\n";
		}

    console.log(savecode);
    
    array[line - 1] = "<div class='usapw'>"+array[line - 1]+"</div>";   
    
    $("pre").html(array);
}