Line numbers to a textarea style body min height 600px codeEditor lineCounter font family lucida console courier new courier monospace font size 1rem font weight 400 margin 0 padding 10px 0 height 75vh border 0 border radius 0 resize none font size 16px line height 1 2 outline none moz box sizing border box webkit box sizing border box box sizing border box outline none codeEditor padding left calc 3 5rem 5px width 100 lineCounter display flex border color transparent overflow y hidden text align right box shadow none color 707070 background color d8d8d8 position absolute width 3 5rem style h2 Code Editor h2 p textarea id lineCounter wrap off readonly textarea textarea id codeEditor wrap off textarea p script var htmlTemplateStr Once upon a time In a real of magic var codeEditor document getElementById codeEditor var lineCounter document getElementById lineCounter var lineCountCache 0 function line_counter var lineCount codeEditor value split n length var outarr new Array if lineCountCache lineCount for var x 0 x lineCount x outarr x x 1 lineCounter value outarr join n lineCountCache lineCount codeEditor addEventListener scroll lineCounter scrollTop codeEditor scrollTop lineCounter scrollLeft codeEditor scrollLeft codeEditor addEventListener input line_counter codeEditor addEventListener keydown e let keyCode e let value selectionStart selectionEnd codeEditor if keyCode 9 TAB 9 e preventDefault codeEditor value value slice 0 selectionStart t value slice selectionEnd codeEditor setSelectionRange selectionStart 2 selectionStart 2 codeEditor value htmlTemplateStr line_counter script
Id codeEditor var lineCounter document getElementById lineCounter var lineCountCache 0 function line_counter var lineCount codeEditor value split n length var outarr new Array if lineCountCache lineCount for var x 0 x lineCount x outarr x x 1 lineCounter value outarr join n lineCountCache lineCount codeEditor addEventListener scroll lineCounter scrollTop codeEditor scrollTop lineCounter scrollLeft codeEditor scrollLeft codeEditor addEventListener input line_counter codeEditor addEventListener keydown e let keyCode e let value selectionStart selectionEnd codeEditor if keyCode 9 TAB 9 e preventDefault codeEditor value value slice 0 selectionStart t value slice selectionEnd codeEditor setSelectionRange selectionStart 2 selectionStart 2 codeEditor value htmlTemplateStr line_counter script