Recently code.google added the feature to edit a file and syntax highlight it!

From what I can understand they added a textarea along with at iframe, where the textarea is where you type in content and the iframe displays the formatting. The textarea is moved up ( like -10000 px or something ) so it is invisible.

What I don't get is how they manage to have the iframe content behaving like a textarea. For instance if you copy and paste a bunch of code they format it immediately.

This is very interesting. Can anyone explain a bit on how does this works?

Recently code.google. added the feature to edit a file and syntax highlight it!

From what I can understand they added a textarea along with at iframe, where the textarea is where you type in content and the iframe displays the formatting. The textarea is moved up ( like -10000 px or something ) so it is invisible.

What I don't get is how they manage to have the iframe content behaving like a textarea. For instance if you copy and paste a bunch of code they format it immediately.

This is very interesting. Can anyone explain a bit on how does this works?

• javascript
• google-code

Share Improve this question Follow edited Feb 8, 2012 at 0:24 dchest 1,5631818 silver badges2020 bronze badges asked Jul 19, 2011 at 1:59 OscarRyzOscarRyz 200k119119 gold badges397397 silver badges574574 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Google Code uses CodeMirror for editing.

Here are documents about its internals written by the author:

• Implementing a Syntax-Highlighting JavaScript Editor—In JavaScript : A brutal odyssey to the dark side of the DOM tree.
• (Re-) Implementing A Syntax-Highlighting Editor in JavaScript.

Lot's and lot's of javascript and custom event handling. It's not so easy to answer since it's a plex piece of software.

They are probably using an <iframe> with contentEditable="true" to make the text editable, the textarea might be there to capture input on browsers that do not support it (or even for some other reason, I can't tell without more analysis).

They also need a lexer for each supported language. This can be done client or server side, to identify which style to apply to each token, plus some heavy DOM manipulation (probably using a library like jQuery for example, to simplify updates to the tree).