In-browser code editor with syntax highlighting

http://www.cdolivet.net/editarea/

by macmac • 19 years ago

22 6 19 years ago

carpal• 19 years ago

This is a really tough problem. I worked on something like this extensively in 2005. Ultimately, the hardest part was syntax highlighting on the current line, because you had to monitor input to figure out when a "token" had been completed, and then do the corresponding magic. Dealing with the idiosyncrasies of changing colors and maintaining cursor position makes this a real bitch.

Turning off syntax coloring on the active line definitely makes the problem easier. Wish I would have thought of that. Strange how you can spend days on a problem but never think of the "easy" solution.

aaroniba• 19 years ago

I looked at EditArea before building the AppJet Code Editor (ACE). (See our in-browser code editor with syntax highlighting at appjet.com).

The problem with EditArea is that the overlay method causes visible ghosting when you insert newlines, even on a fast computer. Also not being able to see highlighting on the current line bothered me.

I based the ACE implementation on http://marijn.haverbeke.nl/codemirror/story.html only simplified the parser and added some features like paren/bracket/brace flashing. The basic idea is to use design mode but keep careful track of the DOM of the design body and cursor. The big challenges then become things like undo support (which we still haven't implemented yet), but the major advantage is that you get a fast and native feel, which is important. We plan to open-source ACE pretty soon.

jsnx• 19 years ago

It's too bad you can't set the width. In fact, it's too bad the guy doesn't force it to 80 chars...

watmough• 19 years ago

This is really cool. It works great in FF 2.0.11, but looks seriously messed up in FF 3.0b2.

aston• 19 years ago

Appjet.com's got a great one of these, too (for javascript).

wyclif• 19 years ago

Looks like they need some English-language help or a run through English spell-check.

In-browser code editor with syntax highlighting

Related Stories