I’d like to be able to syntax-highlight a small amount of editable text in a webpage, with only a few variations in foreground color. (Let’s say three, for the sake of argument.)
My annoying experiences with Online Rich-Text Editors led me to think that reigning in their loose ends is not worth it. So I got the wacky idea to layer several fixed-width-font <textarea> elements on top of each other, and keep them in sync. Each would have a different foreground color, and through background transparency you’d just leave gaps wherever a certain layer wasn’t supposed to print. The browser would do the compositing and all would be well, maybe.
Some exploratory tests in Opera, Chrome, Firefox, and Safari suggested to my surprise that this actually works (nutty as it may sound). But one of the biggest reasons why I want to use very plain text is so that copy and paste are foolproof. Yet when the text has been broken out into layers like this, there’s no union the user can select in and get all the text in its raw form.
My first impulse was to stack on a top-level layer of text which was sync’d to contain content from all layers, but whose color was transparent. Once again, it “worked”…but unfortunately, pretty much all browsers cue the insertion point color from the textarea color that is active. That means the caret becomes invisible, and in some browsers so does the text you’re selecting. (!)
So I solicit insights from those who know more than I about this. Can I hook such a stack in a cross-browser way so that the selection is readable while you’re making it and when the user does “copy” gets the merged text? Has anyone ever tried something like this? Or is there a proof of “that’s a terrible idea and there’s no way you’ll get it to work”? If I could get cross-browser notifications of when the selection changed, I could inject the merged characters into the layer being selected at the points inside the selection. :-/
(Oh what a tangled web we weave…)
It’ll be far quicker for you to use existing solutions. Please look at ACE editor:
http://ace.ajax.org
ACE is an embeddable code editor written in JavaScript. It matches the features and performance of native editors such as Sublime, Vim and TextMate. It can be easily embedded in any web page and JavaScript application. ACE is maintained as the primary editor for Cloud9 IDE and is the successor of the Mozilla Skywriter (Bespin) project.
Specifically this rich-text editor has facilities to show syntax highlighting and to show errors/line numbers, etc.