JSFiddle - React, Tailwind, and code Playground

by Yashpreet Singh

HTML

<textarea name="editContent" id="editContent" rows="20" cols="40" onkeypress="return tabspaces(event);" style="overflow: auto;resize: none;border: 2px double solid;text-align: left;border-radius: 10px;tab-space:4;" >
</textarea>

JavaScript

margarea('editContent');
function margarea(id){
			var string = '';
            for(var no=1;no != 1000;no++){
                if(string.length>0){
                    string +=' ';
                    string += '\n';
                }
                string += no;
            }
            var ar1 = document.createElement('TEXTAREA');
            var tarea = document.getElementById(id);
           
            ar1.className = 'margarea';
            ar1.style.border='1px solid';
           // ar1.style.bordercolor='green';
          //  ar1.style.border-radius="2px";
            ar1.style.height = (tarea.offsetHeight-5) + "px";
            ar1.style.backgroundColor='white';
            ar1.style.width = "15px";
            ar1.style.position = "absolute";
            ar1.style.overflow = 'hidden';
            ar1.style.resize='none';
            ar1.style.textAlign = 'right';
            ar1.style.paddingRight = '0.2em';
            ar1.style.paddingRight = '0.2em'
            ar1.innerHTML = string; //Firefox renders \n linebreak
            ar1.innerText = string; //IE6 renders \n line break
            ar1.style.zIndex = 0;
            tarea.style.zIndex = 1;
            tarea.style.position = "relative";
            tarea.parentNode.insertBefore(ar1,tarea.nextSibling);
            setLine();
			var curr = false;
            tarea.focus();
            tarea.onkeydown = function() { setLine(); }
            tarea.onmousedown = function() { setLine(); curr=true; }
            tarea.onmouseup = function() { setLine(); curr=false; }
            tarea.onmousemove = function() { if(curr){setLine();} }
            function setLine(){
                ar1.scrollTop = tarea.scrollTop;
                ar1.style.top = (tarea.offsetTop) + "px";
                ar1.style.left = (tarea.offsetLeft - 21) + "px";
            }
}