online syntax highlighter

Discussion in 'Javascript' started by Une Bévue, Mar 2, 2007.

  1. Une Bévue

    Une Bévue Guest

    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
    Une Bévue, Mar 2, 2007
    #1
    1. Advertising

  2. Une Bévue

    pcx99 Guest

    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,
    pcx99, Mar 3, 2007
    #2
    1. Advertising

  3. Une Bévue

    Elegie Guest

    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;
    }
    }
    ---
    Elegie, Mar 3, 2007
    #3
  4. Une Bévue

    Une Bévue Guest

    Une Bévue, Mar 3, 2007
    #4
  5. Une Bévue

    Une Bévue Guest

    Elegie <> 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
    Une Bévue, Mar 3, 2007
    #5
  6. Une Bévue

    Elegie Guest

    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.
    Elegie, Mar 3, 2007
    #6
  7. Une Bévue

    Une Bévue Guest

    Elegie <> 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/?uri=http://www.yvon-thoraval.com/XHTM
    L11/js-highlighter.xhtml&lang=fr&doctype=doctypeAUTO&charset=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
    Une Bévue, Mar 3, 2007
    #7
  8. 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
    Lorenzo Bettini, Mar 13, 2007
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Lee Harvey
    Replies:
    1
    Views:
    496
    Adrienne
    Jul 28, 2003
  2. nani
    Replies:
    0
    Views:
    366
  3. Jason Jung

    Ruby Syntax Highlighter for Nano

    Jason Jung, Dec 24, 2005, in forum: Ruby
    Replies:
    2
    Views:
    111
    J. Ryan Sobol
    Dec 24, 2005
  4. Mike Schwab

    highlighter for operator precedence

    Mike Schwab, Apr 19, 2007, in forum: Ruby
    Replies:
    1
    Views:
    81
    Robert Klemme
    Apr 20, 2007
  5. Simon

    Javascript Highlighter

    Simon, Jul 29, 2003, in forum: Javascript
    Replies:
    2
    Views:
    88
    Simon
    Jul 30, 2003
Loading...

Share This Page