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
<link type="text/css" rel="stylesheet" href="SyntaxHighlighter/css/SyntaxHighlighter.css"></link>
<script language="javascript" src="SyntaxHighlighter/Uncompressed/shCore.js"></script>
<script language="javascript" src="SyntaxHighlighter/Uncompressed/shBrushXml.js"></script>
<script language="javascript" src="SyntaxHighlighter/Uncompressed/shBrushJScript.js"></script>
<script language="javascript" src="SyntaxHighlighter/Uncompressed/shBrushCss.js"></script>
<script language="javascript" src="SyntaxHighlighter/Uncompressed/shBrushJava.js"></script>
<script language="javascript" src="SyntaxHighlighter/Uncompressed/shBrushPhp.js"></script>
<script language="javascript" src="SyntaxHighlighter/Uncompressed/shBrushPython.js"></script>
<script language="javascript" src="SyntaxHighlighter/Uncompressed/shBrushCSharp.js"></script>
<script language="javascript" src="SyntaxHighlighter/Uncompressed/shBrushSql.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.ClipboardSwf = 'SyntaxHighlighter/js/clipboard.swf';
</script>
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="<pre name='text0' class='js'></pre>";
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
