By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,198 Members | 1,656 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,198 IT Pros & Developers. It's quick & easy.

online syntax highlighter

P: n/a

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
Mar 2 '07 #1
Share this Question
Share on Google+
7 Replies


P: n/a
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,
Mar 3 '07 #2

P: n/a
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;
}
}
---
Mar 3 '07 #3

P: n/a
pcx99 <x@x.comwrote:
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
Mar 3 '07 #4

P: n/a
Elegie <el****@invalid.comwrote:
>
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
Mar 3 '07 #5

P: n/a
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.
Mar 3 '07 #6

P: n/a
Elegie <el****@invalid.comwrote:
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
Mar 3 '07 #7

P: n/a
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
Mar 13 '07 #8

This discussion thread is closed

Replies have been disabled for this discussion.