PDA

View Full Version : [DHTML] Real Time Syntax Highlighting JavaScript


fermads
08-20-2006, 06:26 PM
1) CODE TITLE: Real Time Syntax Highlighting JavaScript

2) AUTHOR NAME/NOTES: Fernando M.A.d.S.

3) DESCRIPTION: This is a code editor with syntax highlighting engine written in JavaScript that colors text in real-time while it is being typed in the browser.
The example shows syntax highlighting for Java and HTML. Other languages can be easily implemented, its a matter of some regular expressions.

Tested with Firefox 1.5 and Internet Explorer 6 only.

4) URL TO DEMO AND CODE:
http://syntaxhighlighting.blogspot.com/2006/08/real-time-syntax-highlighting.html
blm126
08-20-2006, 06:40 PM
Looked nice until a clicked in the textarea, and my browser crashed. The things I give up to beta test firefox...
fermads
08-20-2006, 06:42 PM
mm... this script is really new.. and i dont find anything like this around..
I tested only in Firefox 1.5.0.6 and IE6
blm126
08-20-2006, 06:44 PM
yup, crashed FF2b1 again. It's important to note that as I'm using a beta browser it may not be your fault.
mburt
08-20-2006, 06:56 PM
Still a nice script, though.
Twey
08-20-2006, 07:31 PM
It works in the stable version of FX. The only bug I can see is that it temporarily displays the character 0x7f when it recolours something or starts a new line. It's not a serious problem, but just noticeable enough to be annoying :)

Otherwise, very good job indeed.
fermads
08-20-2006, 07:38 PM
Twey, your right.
this character is part of the "system" that puts the cursor/caret back to its position after replacing/coloring the text.
But here its fast enough that i can't see it cuz its replaced instantly.
Maybe I shold try to change it to a less visible character.
DimX
08-20-2006, 07:46 PM
Wow, now that's realy cool, nice job fermads :)

But you shouldn't use image as the gutter. Line numbers and lines don't match (IE6)
Twey
08-20-2006, 07:48 PM
Maybe I shold try to change it to a less visible character.Yes... how about \0? That shouldn't show on most systems.
fermads
08-20-2006, 07:48 PM
ThanX DimX :)
blm126
08-20-2006, 07:57 PM
Just took a look in a supported browser. And it is pretty cool. My suggestion is you need a textarea backup. That way a browser like Opera(doesn't work I checked) can still be allowed to type. If you could implement that(without browser detection), I would be impressed even more.
fermads
08-20-2006, 08:06 PM
Yes... how about \0? That shouldn't show on most systems.

Twey
yes, thanx :)
Your idea lead me to other that seems to works.
The \0 do not work in IE cuz it must be a visible character cuz IE actually search this character (like when you do a Edit > Find (on this page)) and it can't find it. But.. I found another character ­ that apperars to work great and is invisible. Need to do more testing.
Thanx for the idea.

EDIT: Twey, I just notice that this will help to fix the undo/redo problem too :)
fermads
08-20-2006, 08:15 PM
Just took a look in a supported browser. And it is pretty cool. My suggestion is you need a textarea backup. That way a browser like Opera(doesn't work I checked) can still be allowed to type. If you could implement that(without browser detection), I would be impressed even more.

blm126, I thought about a textarea version. Ill look at it when the main code gets more mature. Thanx.
// TODO: textarea without syntax highlighting for non supported browsers