SyntaxHighlighter

I’ve just release a new demo of the Rialto framework. One of the new features i wanted to add was the dynamic display of the source code. And here come SyntaxHighlighter. All in javascript it quickly allow this functionality in three steps

1.Download it in your webapp
2.Include scripts and css in your HTML page

3. Display a script

You just have to get the code source you want to display. For the demo i made an asynchronous call on the server to get the javascript file


var remote=new rialto.io.AjaxRequest({
url:"myFile.js",
method: 'get',
withWaitWindow:false,
onSuccess : loadScript
}) ;
remote.load('');

}

function loadScript(request){
var text = request.responseText;
...

You add it in a PRE element having the following attributes

  • name
  • class (‘js’ for javascript)

For the demo i add the all in a Rialto popup


var div = document.createElement('DIV');
var popUpSource=new rialto.widget.PopUp('source',150,420,'700','400','',"Source",'gray');
popUpSource.add(div);
div.innerHTML="

";
var source=div.firstChild;
source.appendChild(document.createTextNode(text));

And then you just have to execute the HighlightAll function using as parameter the name value of the PRE element


dp.SyntaxHighlighter.HighlightAll('text0');

And here it is

SyntaxHighlighter