Browser based syntax highlighting code editor

I’ve been looking for a working source code / plain text editor which can be run on a browser. There are dozens of WYSIWYG html editors out there (see here for a comprehensive list). However, for pure source code or just plain text I just found two options: Helene and About:Edit.

The first one, Helene, is open source software but it’s not ready for production use. The other one, About:Edit, looks really cool but it’s commercial which is good but I can’t afford to buy a license, so it’s not a realistic option in my case.

Thinking a bit about the main problem of that kind of editors, it seems to be that browsers don’t support natively the editing of hightlighting code, even if it can be emulated with the WYSIWYG editors it doesn’t feel like it’ll be very efficient and/or clean. So I took another approach, which is a bit of a hack but I think that can solve my needs pretty well. The hack is just to use modern browsers absolute positioning and opacity settings. We just place a div below a textarea, with the same sizes, then put the opacity of the textarea to 30% and we set the text color to white. Then we just need to update the underlying div with the changes in the textarea, all the text editing, cut&paste, selection … is handled natively by the browser but we can style the contents (like syntax highlighting) in the div.

It doesn’t look perfect, since the half transparent textarea makes the colors look too soft but the speed is great and it’s really easy to implement.

Expect a simple demo sometime next week, I’m a bit too busy right now too expend my time on this kind of experiments :(

Goodbye MacroCSS, long live CSSing

I’ve just spend an hour chatting with Daniel Mota (aka IceBeat) about his project CSSing. I’ve been following its developement for some months now, in fact I started my own version, MacroCSS, since he didn’t have released the source code at that time.

I didn’t have the time to continue the development of MacroCSS, I did manage though to implement a SAC based parser for CSS which turned out to be quite powerful. IceBeat was searching with a post in his blog for a replacement for his regular expression based parser. I pointed him to MacroCSS and he was quite impressed with it.

After chatting with him I’m quite happy, not just because he liked my parser but because we almost share the same vision for this project. Since as I said, I don’t have the time to continue the development of MacroCSS on my own, I’m deprecating it and I’ll focus on helping IceBeat with CSSing in what I can.

I really think this project could be a real hit for the web development comunity, it fits really well with other ‘web 2.0’ (hell, how much I hate that term) technologies like ajax (I hate this one even more). So if anyone is reading this and wants to help out, he/she will be more than welcome.