First step: create two textarea
Create two textarea, a textarea to stock the numbers and a textarea to stock the code
<div class="textareaHere">
<textarea class="numbersHereNow" cols="5" readonly></textarea>
<textarea class="codeTextarea"></textarea>
</div>
Add the CSS
.textareaHere{
display: flex;
background: #1d1e22;
flex-grow: 1;
height: 70vh;
border-left: 1px solid #353535;
}
.textareaHere > textarea{
border: none;
margin: 0;
background: #1d1e22;
resize: none;
outline: none;
font-size: 13px;
margin: 5px;
}
.codeTextarea{
flex-grow: 1;
color: #eee;
}
.numbersHereNow{
overflow: hidden;
color: #414141;
}
Add JS
Here, the JS part of the code, to set the number textarea scroll when the code textarea scroll, and the number of line in the code textarea equal the number of line in the number textarea.
let textareasHere = Array.from(document.querySelectorAll(".textareaHere > textarea"));
for(let i=0;i<textareasHere.length;i++){
console.log(i);
if(i!=0 && i%2==1){
textareasHere[i].addEventListener("scroll", function(e){
textareasHere[i-1].scrollTop = textareasHere[i].scrollTop;
textareasHere[i-1].scrollLeft = textareasHere[i].scrollLeft;
});
textareasHere[i].addEventListener("input", function(e){
textareasHere[i-1].textContent = "";
const numberOfLinesHere = Math.max(textareasHere[i].value.split("\n").length, 1);
for(let h = 0; h < numberOfLinesHere; h++){
textareasHere[i-1].textContent += h.toString()+"\n";
}
textareasHere[i-1].setAttribute("cols", numberOfLinesHere.toString().length.toString());
});
const numberOfLinesHereZ = Math.max(textareasHere[i].value.split("\n").length, 1);
for(let h = 0; h < numberOfLinesHereZ; h++){
textareasHere[i-1].textContent += h.toString()+"\n";
}
textareasHere[i-1].setAttribute("cols", numberOfLinesHereZ.toString().length.toString());
}
}
Here the visual result: