Anonymous
Domino 2.0 Rich Internet Applications with IBM Lotus Notes/Domino
You are here: Today » Code to HTML with syntax highlighting
« Domino as a rapid development tool for web applications
A text adventure game written in XML and JavaScript »

Code to HTML with syntax highlighting

This tool to convert HTML, CSS, JavaScript, LotusScript and Lotus formulas in HTML is based on a very nice script I found: syntaxhighlighter. I extracted the parts that matter for my tool and I did some modifications to make it run faster.
For the impatient: here is the link my code2html tool.

The CSS for the syntax highlighting

These are the classes you have to add to your CSS. You can change their presentation if you like:

/* syntax highlighting*/
.code{font-family:monospace;font-size:11px}
.comment{color:#090}
.string{color:#c0c}
.keyword{color:#00f}
.domobj{color:#d00}
.color{color:#d00}
.attr{color:#d00}

The complete hilite JavaScript

/* Code to HTML with Syntax Highlighting */
var $=function(a,b){return document.getElementById(a)},G={}
G.hilite={
exec:function(){
    var m=this,o=$('source').value,r,v
    r=m.rVal(document.forms[0].codetype)
    v=m.get(o,m[r]())
    $('out').innerHTML=v
    $('html-out').value='<p class="code">'+v+'</p>'
},
get:function(a,b){
    var m=this,r=m.match(a,b),v=[],p=0,i,q
    for(i=0;i<r.length;i++){
        q=r[i]
        if(q[0]>p-1){
            v.push(m.esc(a.substring(p,q[0])))
            v.push(q[1]?'<span class="'+q[1]+'">'+m.esc(q[2])+'</span>':m.esc(q[2]))
            p=q[0]+q[2].length
        }
    }
    v.push(m.esc(a.substring(p)))
    return v.join('').replace(/\r/gm,'').replace(/\n/gm,'<br/>\n').replace(/\t/gm,'&nbsp;&nbsp;&nbsp;&nbsp;')
},
match:function(a,b){
    var m=this,v=[],q,i,p
    for(i=0;i<b.length;i++){q=null;p=b[i];while((q=p[0].exec(a))!=null)v.push([q.index,p[1],q[0]])}
    return v.sort(function(a,b){return a[0]-b[0]})
},
esc:function(a){return a.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')},
keys:function(a){return new RegExp('\\b'+a.replace(/ /g,'\\b|\\b')+'\\b','gm')},
rVal:function(a){for(var i=0;i<a.length;i++)if(a[i].checked)return a[i].value;return null}
}

The JavaScript explained

The namespace hilite is added to my global namespace G. Each language is a function in that namespace to that returns the array of regular expressions to match with the source, together with the className of the span to wrap them in, e.g:

/* Notes Formula */
G.hilite.frm=function(){
    var exp=
        [/"(?:\.|(\\\")|[^\"")*"/gm,'string'],
        [/@\w+/g,'keyword']
    ]
    return exp
}

The actual conversion is done in two passes. First it makes an array of all matches of all regular expressions. Each match is an array in itself, containing the position of the match, the matched part and the className. This array of matches is returned sorted on their index in the source string:

match:function(a,b){
    var m=this,v=[],q,i,p
    for(i=0;i<b.length;i++){q=null;p=b[i];while((q=p[0].exec(a))!=null)v.push([q.index,p[1],q[0]])}
    return v.sort(function(a,b){return a[0]-b[0]})
}

A loop through this array of matches adds all the non-matched parts of the source and the matches wrapped in spans with the corresponding className together. The function skips matches within matches to avoid highlighting of unwanted parts, e.g. keywords within comments or strings. It also converts < and > and it replaces tabs with non-breaking spaces:

get:function(a,b){
    var m=this,r=m.match(a,b),v=[],p=0,i,q
    for(i=0;i<r.length;i++){
        q=r[i]
        if(q[0]>p-1){
            v.push(m.esc(a.substring(p,q[0])))
            v.push(q[1]?'<span class="'+q[1]+'">'+m.esc(q[2])+'</span>':m.esc(q[2]))
            p=q[0]+q[2].length
        }
    }
    v.push(m.esc(a.substring(p)))
    return v.join('').replace(/\r/gm,'').replace(/\n/gm,'<br/>\n').replace(/\t/gm,'&nbsp;&nbsp;&nbsp;&nbsp;')
}

The tool

You can use the tool as it is, add your own languages, find ways to make it faster. One nice addition to the Notes formula regular expressions would be to highlight @rem comments.
Here is the link to the tool. Knock yourself out and feel free to comment. And feel free to use it, but pay respect to syntaxhighlighter and myself in a remark.

Star rating

0%

Comments

To add a comment, log in or register as new user. It's free and safe.