Friday, May 25th, 2007

Implementing a syntax-higlighting JavaScript editor in JavaScript

Category: JavaScript, Library, Showcase

Marijn Haverbeke has not only been able to create a syntax-highlighting JavaScript editor in JavaScript, but he has written up the story of the brutal odyssey to the dark side of the DOM tree.

The story is a great romp through the never-never-land of JavaScript, DOM, and browser “quirks”. It is well worth a read to find out about fun with selection, designMode, parsing, and much much more.

A huge kudos to Marijn.

JS Syntax Editor

(via Dean)

Posted by Dion Almaer at 12:40 pm

4.3 rating from 53 votes


Comments feed TrackBack URI


Comment by Калоян К. Цветков — May 25, 2007

Very very cool.

Comment by Ed Knittel — May 25, 2007

We need an Ajax community equivalent to Colbert’s “Alpha Dog of the Week.” Big ups!

Comment by Ryan Breen — May 25, 2007

Very nice. But I think it’s better to use a textarea then apply the source formatting behind it. Since if you paste rich content in a designMode iframe it will be presented as rich content, it will not be converted into plain text. This editor uses a textarea instead, petty neat trick:

Comment by Spocke — May 25, 2007

We actually wrote an editor with syntax highlighting, with javascript in the browser, that uses JEdits syntax files. It worked with mixed languages and all. That was a fun…….

Comment by Marcus — May 25, 2007

Very nice work Marijn, keep up the good work!!

Comment by Marc — May 25, 2007

OMG. Marijn. you just gave me an editor. I’ve done almost everything else for the JDA composer, and my (non) editor sucked completely. Thank you, Thank you, Thank you.

May Googles sourcers light your path.

Comment by peter svensson — May 25, 2007

Nice one, but it’s code too large, if to compare with Codepress. Why not to use something smaller than MochiKit? Mootools maybe? or no libraries at all?

Comment by Andrew Redkin — May 26, 2007

I’m really impressed by both the main example and the example posted above in the comments. It seems that most of the focus of inline editors has been the HTML side for our clients, but every once in a while it’s nice to have something like this in your toolbox, if you know that you’re going to be the one doing most of the maintenance. The one thing missing from all the examples I’ve seen — which would take it over the top as far as I’m concerned — is tag/function insight and completion… Typing in the > sign of a block tag could create the closing </tag> automatically, just on the other end of my cursor. Or if I type in a ( it could automatically put in the ) on the other end of my cursor. You get the point. Function/tag insight would seal the deal.

Comment by Mike Ritchie — May 26, 2007

Aside from the Opera/Safari bugs, CTRL+Z support would be nice. I’d also suggest that you add a hidden textarea with the contents as this would relieve form submission and such.

Comment by Andy — May 27, 2007

Oh hey, people are blogging about me!

Ryan Breen: The reason I do not use a textarea is that automatic indentation will get too slow for big chunks of text — the whole text has to be read out of the dom node, modified, and put back every time.

Andrea Giammarchi: Cool approach. Someone has shown me a vi clone that does something similar. It is quite a can of worms too though (the one you link gives me $ and # characters when I press and — in Firefox on Linux)

Mike Ritchie: Hmm, ctrl-z works for me.

Nicola Rizzo: Heheh, yes, MochiKit is a bit fat. But it provides really really nice tools. I didn’t put it through any minimizer on the page that demonstrates the editor, minimizing cuts it down to 86K.

Comment by Marijn — May 28, 2007

(Ehh, I wrote [home] and [end] in the thing about the $ and # characters, but they got eaten as HTML tags.)

Comment by Marijn — May 28, 2007

Hi Marijn,
my editor is an alpha version, it gives $ and # instead of [home] and [end] even in IE and Opera ;)

Comment by Nicola Rizzo — May 28, 2007

Nice work. I created similar editor cca two years ago ( – press Load button to load more content), which is based on another one ( I had not time to do some polishing (for opera mostly)…

Comment by los — May 28, 2007

Leave a comment

You must be logged in to post a comment.