In this article, I'm going to talk about how to make a very simple, browser based code editor using mostly CSS. I originally built this when I needed to let users edit JSON in a CMS that I was building.
If you just want to jump to the code and the working example, here you go. The code can be found here and the working example here
Contenteditable sucks...
So if you were ever pondered building your own code editor, you have probably looked at contenteditable. While contenteditable is great for many situations, there is one huge problem in regards to updating the content while you type. It is nearly impossible to place the cursor back to where it was after you syntax highlight the code in the editor as it changes.
In my case, I wanted something very minimal without reaching for some huge, heavy handed library for this. I set out to see if I could build a very simple editor using mostly CSS, just using Javascript to create the syntax highlighted output, and update the preview.
I wanted to type in a normal