Simple Embedded Code Editor

JavaScript Fragment
HTML / JS / CSS
GitHub Gist

What It Is

A very simple way to turn a TEXTAREA into a code editor(-ish)

Status

Last Reviewed:

I used to use this quite a bit when I needed a code editor in the Opti CMS. And I used it on this site for a while before switching to ACE Editor. It’s handy when you’re in a pinch.

Details

This is an example of using a textarea as a code editor without any external dependencies or files. It’s a bunch of inline JavaScript and CSS on a textarea element that:

  1. Sort of styles it like a code editor
  2. Catches tabs and converts them to four (4) spaces
  3. Duplicates leading spaces from the last line
  4. Auto-expands to input

It’s not sophisticated, but it’s completely self-contained. If you need a code-ish editor in a place where you can’t or don’t want to pull in anything more complicated, it’s handy.

Here it is – try it out.