portfolio | contact
Tuesday the 18th

syntax highlighting

Tuesday, 3:33 PM
Ive been toying with the idea for a long time - adding syntax highlighting to rendur that is. There were a couple technical challenges standing in the way, but I feel that I've mostly circumvented them. I haven't officially moved rendur to the new version yet - since it still needs more testing, but you can get a feel for it here: rendur with syntax highlighting. Hit me up with feedback. Please. ( I hope it goes without saying that this will not be enabled for IE. Screw IE. Might support safari if i get around to it. )

css highlighting
example of CSS highlighting

I have also added the ability to turn off real time editing as this can be rather processor intensive if you're working on a large page, or with embedded objects. Ive also added the ability to turn off syntax highlighting since slightly older systems can choke on all the cycles it eats. Remember, this is javascript, not native desktop code :)

render with new options Keep reading for a technical detail of some of the challenges I had to work around:
First and foremost is adding color to a text area. This is no minor task since emulating a textarea with a div was far more work than I wanted to do, and textareas do not support coloring portions of their contents. I solved this by setting the background to transparent and placing a div behind it with it's innerHTML linkedd to value of the textarea.

Coloring the text, rather than highlighting would have been ideal. I actually toyed with that possibility by means of setting the transparency of the textarea to 50% so the colors of the div below would show through. This had the unfortunate side effect of also making the scroll bars, text selections of text insertion caret semi transparent. I think when rgba() is more widely available, this will be possible.

The other complete pain was keeping the scroll offset of the div linked with that of the textarea. Sounds like it would be easy right? Turns out firefox refuses to fire the onscroll() event. Wtf firefox. (the bug associated with this is marked fixed, but as far as firefox 2 is concerned, it most certainly is not.) This stings me more because I am not used to you letting me down :( The workaround wasn't pretty but it worked. It involved tracking the mouse down/move/up events on the textarea and syncing during each event. This is one of the biggest processor hogs. I will likely rewrite it to delay the sync function call a few milliseconds and cancel any sync calls which are older than the most recent sync call. I then had to trap the mouse wheel scroll but that was surprisingly simple

◄ back