TLDR: Use CodeMirror
Someone else here recommended CodeMirror, and I can't hardly recommend it enough! But this answer didn't really provide any technical details.
Other solutions: Everything else I tried here has problems with line numbers not matching up with lines. I believe this is because I have monitor DPI (dots per inch) at 120%, and these solutions didn't take this into account.
So, how do you use CodeMirror??? Easy! Just look at the 21,000 words of the documentation! I hope to explain 99% of your questions on it in less than page or two.
Demo it Up!
100% working demo, and it's working perfectly in the StackOverflow sandbox:
var editor = CodeMirror.fromTextArea(document.getElementById('code'), { lineNumbers: true, mode: 'text/x-perl', theme: 'abbott',});<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script><script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/perl/perl.min.js"></script><link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css"></link><link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/theme/abbott.min.css"></link><textarea id="code" name="code">if($cool_variable) { doTheCoolThing(); # it's PRETTY cool, imho}</textarea>Features!
- Insert/overwrite mode.
- Multiple row indenting simultaneously.
- Tons of themes.
TLDR: How to Use CodeMirror, in a Page or Less
Step 1 - Load Basic Core Libraries
Add this to your <head> block...
<script language="javascript" type="text/javascript" src="/static/js/codemirror-5.62.0/lib/codemirror.js"></script><link rel="stylesheet" type="text/css" href="/static/js/codemirror-5.62.0/lib/codemirror.css"></link>And, if you like to have extra-bracket color matching, also load this:
<script language="javascript" type="text/javascript" src="/codemirror-5.62.0/addon/edit/matchbrackets.js"></script>Step 2 - Setup Syntax Highlighting
Check the /codemirror-5.62.0/mode/ dir to see what language matches the language you'll be coding in. There is extensive support in this area.
Add this to your <head> block...
<script language="javascript" type="text/javascript" src="/static/js/codemirror-5.62.0/mode/perl/perl.js"></script>Step 3 - Initialize and Display CodeMirror
Have some textarea to use....
<textarea id="code" name="code"></textarea>Initialize and set your codemirror in the JS. You need to use the Mimetype to indicate the mode you want to use, in this case, I'm indicating the Perl Mimetype...
var editor = CodeMirror.fromTextArea(document.getElementById('code'), { lineNumbers: true, mode: 'text/x-perl', matchBrackets: true,});Step 4 - Pick a Theme
Choose some theme you like, 'liquibyte', 'cobalt' and 'abbott' are both pretty decent dark-mode-ish themes. Run this after defining editor...
editor.setOption('theme', 'cobalt');And that's it!