This is the demo for an article I wrote on CSS-Tricks on how to use a conventional syntax-highlighting library to create an editable input for code that supports syntax highlighting, and acts like a textarea.
The textarea, almost completely transparent except for the caret-color, is positioned on top of the syntax-highlighted block using z-indexes, and the result is synchronised whenever the user enters code.
Due to a suggestion in a comment to the article, I have created a custom element for this technique in this Pen.