Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > online syntax highlighter

Reply
Thread Tools

online syntax highlighter

 
 
Une Bévue
Guest
Posts: n/a
 
      03-02-2007

i'm in search of an online syntax highlighter able to highlight either
JavaScript, CSS or HTMl only or a whole page.

the result would be shown on the page itself, on demand.
--
Une Bévue
 
Reply With Quote
 
 
 
 
pcx99
Guest
Posts: n/a
 
      03-03-2007
Une Bévue wrote:
> i'm in search of an online syntax highlighter able to highlight either
> JavaScript, CSS or HTMl only or a whole page.
>
> the result would be shown on the page itself, on demand.


Actually I just stumbled across this URL a few hours ago. I haven't
tested it but it looks like it may do what you're wanting to do, even if
it requires some modification to do it.

http://softwaremaniacs.org/soft/highlight/en/

You might also be interested in markdown as well.

http://www.attacklab.net/showdown-gui.html

Hope that helps you out a bit.

Regards,
 
Reply With Quote
 
 
 
 
Elegie
Guest
Posts: n/a
 
      03-03-2007
Une Bévue wrote:

Hi,

> i'm in search of an online syntax highlighter able to highlight either
> JavaScript, CSS or HTMl only or a whole page.


I am aware of no such tool, so cannot advise properly in this regard.
Still, the topic is quite interesting, so I thought I'd try and write
some pure javascript highlighter.

The following, being regexp-based, is rather short and simple. However,
regexp approaches unfortunately fail on certain lexical analysis
(especially statements mixing strings, regexps and comments, with tokens
like "/" and "*"), therefore the script will not be 100% accurate
(though probably enough for most uses).

Anyway, that was a fun thing to do to reorganize a mind blurred by the
regular Friday beers

Cheers,
Elegie.



The test case:
---
<script type="text/javascript" src="js-highlighter.js"></script>
<script type="text/javascript">
function foo(){
document.getElementById("result").innerHTML =
document.forms[0].elements["source"].value.highlightJS() ;
}
</script>

<form action="#">
<textarea name="source" rows="30" cols="40"></textarea>
<input type="button" value="Highlight!" onclick="foo()">
<pre id="result"></pre>
</form>
---


The javascript file (js-highlighter.js):
---
String.prototype.highlightJS = function() {

// ------------------------------------------------------------------
// Parameters
// ------------------------------------------------------------------

var
COLOR_STRINGS = "blue" ,
COLOR_COMMENTS = "green" ,
COLOR_NUMBERS = "red" ,
COLOR_KEYWORDS = "navy" ,
COLOR_REGEXPS = "gray" ;

var
SYMBOL_STRINGS = "s" ,
SYMBOL_COMMENTS = "c" ,
SYMBOL_NUMBERS = "n" ,
SYMBOL_KEYWORDS = "k" ,
SYMBOL_REGEXPS = "r" ;

// ------------------------------------------------------------------
// Main
// ------------------------------------------------------------------

var keywords = [
"in" ,
"break" ,
"else" ,
"new" ,
"var" ,
"case" ,
"finally" ,
"return" ,
"void" ,
"catch" ,
"for" ,
"switch" ,
"while" ,
"continue" ,
"function" ,
"this" ,
"with" ,
"default" ,
"if" ,
"throw" ,
"delete" ,
"try" ,
"do" ,
"instanceof" ,
"typeof"
];

var source=this;
var entities=[];
var esc=null;
var ii;

// define the 'escape char'
esc=new Date().getTime();
while(this.indexOf("x"+esc+"x")!=-1)
esc++;
esc="x"+esc+"x";
source=source.replace(new RegExp(esc,"g"), esc+esc);

// substitute text by pointer, for advanced expressions
source=substitute(source, SYMBOL_COMMENTS,
/\/\/[^\r\n]*/g);
source=substitute(source, SYMBOL_COMMENTS,
/\/\*([^*]|(\*+[^*/]))*\*+\//g);
source=substitute(source, SYMBOL_REGEXPS,
/\/(\\\/|\[(\\\]|[^\]\r\n])+\]|[^/\r\n])+\/[gim]*/g);
source=substitute(source, SYMBOL_STRINGS,
/"(\\"|[^"])*"/g);
source=substitute(source, SYMBOL_STRINGS,
/'(\\'|[^'])*'/g);
source=substitute(source, SYMBOL_NUMBERS,
/(\b\d+\.?\d*|(\b\d*)?\.\d+)(e[+-]?\d*)?/gi);

// same for keywords
for(ii=0; ii<keywords.length; ii++) {
source=substitute(
source,
SYMBOL_KEYWORDS,
new RegExp("\\b"+keywords[ii]+"\\b","g")
);
}

// clean overlapping in substituted values
// this does not solve all problems, though
for(ii=0; ii<entities.length; ii++) {
entities[ii] = reinject(
entities[ii],
"[" +
SYMBOL_STRINGS +
SYMBOL_COMMENTS +
SYMBOL_NUMBERS +
SYMBOL_KEYWORDS +
SYMBOL_REGEXPS +
"]"
);
}

// htmlize all parts
source=htmlize(source)
for(ii=0; ii<entities.length; ii++) {
entities[ii] = htmlize(entities[ii]);
}

// reinject 'colored' values
source=reinject(source, SYMBOL_STRINGS, COLOR_STRINGS);
source=reinject(source, SYMBOL_COMMENTS, COLOR_COMMENTS);
source=reinject(source, SYMBOL_REGEXPS, COLOR_REGEXPS);
source=reinject(source, SYMBOL_NUMBERS, COLOR_NUMBERS);
source=reinject(source, SYMBOL_KEYWORDS, COLOR_KEYWORDS);

// replace 'escape char'
source=source.replace(new RegExp(esc+esc,"g"),esc);

return source;

// ------------------------------------------------------------------
// Helpers
// ------------------------------------------------------------------

function substitute(source, symbol, match) {
source=source.replace(
match,
function(s){
entities[entities.length]=s;
return esc +
symbol +
(entities.length-1) +
esc ;
}
);
return source;
}

function reinject(source, symbol, color) {
source=source.replace(
new RegExp(esc+symbol+"(\\d+)"+esc,"gi"),
function(s, m){
return span(entities[m], color);
}
);
return source;
}

function span(s, color) {
return color ? "<span style=\"color:"+color+"\">"+s+"<\/span>" : s;
}

function htmlize(source) {
source=source.replace(/&/g, "&amp;");
source=source.replace(/</g, "&lt;");
source=source.replace(/>/g, "&gt;");
source=source.replace(/\r\n|\r|\n/g,"<br>");
source=source.replace(/\s/g,"&nbsp;");
return source;
}
}
---
 
Reply With Quote
 
Une Bévue
Guest
Posts: n/a
 
      03-03-2007
pcx99 <(E-Mail Removed)> wrote:

> Actually I just stumbled across this URL a few hours ago. I haven't
> tested it but it looks like it may do what you're wanting to do, even if
> it requires some modification to do it.
>
> http://softwaremaniacs.org/soft/highlight/en/
>
> You might also be interested in markdown as well.
>
> http://www.attacklab.net/showdown-gui.html
>
> Hope that helps you out a bit.


Right, fine thanks !

--
Une Bévue
 
Reply With Quote
 
Une Bévue
Guest
Posts: n/a
 
      03-03-2007
Elegie <(E-Mail Removed)> wrote:

>
> I am aware of no such tool, so cannot advise properly in this regard.
> Still, the topic is quite interesting, so I thought I'd try and write
> some pure javascript highlighter.
>
> The following, being regexp-based, is rather short and simple. However,
> regexp approaches unfortunately fail on certain lexical analysis
> (especially statements mixing strings, regexps and comments, with tokens
> like "/" and "*"), therefore the script will not be 100% accurate
> (though probably enough for most uses).
>
> Anyway, that was a fun thing to do to reorganize a mind blurred by the
> regular Friday beers


that's a magic beer, are u living in south Germany ?



here is a quick and durty try-out of your code :

<http://www.yvon-thoraval.com/XHTML11/js-highlighter.html>


--
Une Bévue
 
Reply With Quote
 
Elegie
Guest
Posts: n/a
 
      03-03-2007
Une Bévue wrote:

Hello,

> that's a magic beer, are u living in south Germany ?


I don't know if it was magic, but they were many for sure, given the
head I've bought this morning...

I'm from France, actually, and your name looks familiar: weren't you
teaching economics in highschool, say, 15 years ago?

> here is a quick and durty try-out of your code :


I don't really understand your example, simply remember that the code
I've provided only works for javascript input - not for HTML nor CSS
(though this could probably be achieved without much effort I guess,
provided the beer isn't 'too' magic as well).


Cheers,
Elegie.
 
Reply With Quote
 
Une Bévue
Guest
Posts: n/a
 
      03-03-2007
Elegie <(E-Mail Removed)> wrote:

> I'm from France, actually, and your name looks familiar: weren't you
> teaching economics in highschool, say, 15 years ago?


Never, only maths...

>
> > here is a quick and durty try-out of your code :

>
> I don't really understand your example, simply remember that the code


i got a prob, i've corrected the page to be valid with "Validome" :

<http://www.validome.org/validate/?ur...raval.com/XHTM
L11/js-highlighter.xhtml&lang=fr&doctype=doctypeAUTO&char set=charsetAUTO
>


but it's no more working with Firefox 2...

> I've provided only works for javascript input - not for HTML nor CSS


Right i didn't catch the keywords )))

> (though this could probably be achieved without much effort I guess,
> provided the beer isn't 'too' magic as well).


Yes for sure, just to write another :

String.prototype.highlightHTMl

with different keywords.

verify regexp and so...
--
Une Bévue
 
Reply With Quote
 
Lorenzo Bettini
Guest
Posts: n/a
 
      03-13-2007
Une Bévue wrote:
> i'm in search of an online syntax highlighter able to highlight either
> JavaScript, CSS or HTMl only or a whole page.
>
> the result would be shown on the page itself, on demand.


although I haven't tried it yet, http://shjs.sourceforge.net/

this is based on the language definition files of the program I
maintain, GNU Source-highlight, http://www.gnu.org/software/src-highlite


--
Lorenzo Bettini, PhD in Computer Science, DSI, Univ. di Firenze
ICQ# lbetto, 16080134 (GNU/Linux User # 158233)
HOME: http://www.lorenzobettini.it MUSIC: http://www.purplesucker.com
BLOGS: http://tronprog.blogspot.com http://longlivemusic.blogspot.com
http://www.gnu.org/software/src-highlite
http://www.gnu.org/software/gengetopt
http://www.gnu.org/software/gengen http://doublecpp.sourceforge.net
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
highlighter for operator precedence Mike Schwab Ruby 1 04-20-2007 08:58 AM
Ruby Syntax Highlighter for Nano Jason Jung Ruby 2 12-24-2005 04:14 PM
Javascript Highlighter Simon Javascript 2 07-30-2003 11:29 AM
Seeking: Online HTML syntax highlighter Lee Harvey HTML 1 07-28-2003 04:23 AM



Advertisments