SyntaxHighlighter

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

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="

";
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
SyntaxHighlighter