Je viens de terminer une nouvelle démo du framework Rialto. Une des nouveautés que je souhaitais apporter était la visualisation dynamique du code source exécuté. C’est la qu’intervient SyntaxHighlighter. Entièrement écrit en javascript il permet d’intégrer cette fonctionnalité très rapidement en trois étapes:
1.Télécharger les source dans votre webapp
2.Inclure des différents fichiers dans votre page HTML
<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. Afficher un script
En fait il suffit de récupérer le code source à afficher.
var text ="source_to_display":
De l’incorporer dans un élément PRE ayant les attributs:
- name
- class (ici js pour javascript)
Pour la démo le source est affichée dans une 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));
Enfin on exécute la fonction HighlightAll en passant en paramètre la valeur de l’attribut name de l’élément PRE crée précédemment.
dp.SyntaxHighlighter.HighlightAll('text0');
Et voici le résultat
