Ajouter de la coloration syntaxique au code source publié

Comme je publie parfois du code source sur mon blogue, je me disais que ça serait intéressant de pouvoir ajouter de la couleur à mes exemples pour faciliter la lisibilité. Au début, j'ai vérifié si je ne pouvais pas utiliser quelque chose comme la coloration syntaxique de GeSHI (Generic Syntax Highlighter) mais comme il s'agit d'une librairie PHP, je devais trouver une autre solution.

En fouillant un peu, je suis tombé sur Quick Highlighter, un convertisseur web qui prend le code en entrée (on doit spécifier le langage) et qui retourne le code coloré en format HTML. Avec ça, j'aurais pu simplement copier / coller le résultat dans mon blogue.

Mais comme je voulais quelque chose d'un peu plus automatisé, j'ai découvert sur Google Code un projet qui s'appele SyntaxHighlighter, complètement indépendant du serveur web puisqu'il fonctionne côté client en JavaScript et CSS. Peut-être avez-vous déjà vu le rendu du code source de Yahoo Developer Network ou Aptana ? C'est ce composant qu'ils utilisent.

Par rapport à GeSHi, SyntaxHighlighter possède trois défauts notables:

• il est plus lent que GeSHi (qui roule côté serveur)
• il est efficace pour une source comptant peu de code
• il est limité au niveau des langages supportés : C++, C#, CSS, Delphi, Java, JavaScript, PHP, Python, Ruby, SQL, VB, XML et HTML

Pour l'intégrer à mon blogue Blogger, voici ce que j'ai du faire:

1. Dans l'onglet Layout, aller dans Edit HTML
2. Juste avant la balise </head>, faire un lien vers les fichiers JavaScript de chaque langage pour lequel on veut supporter la coloration :
   
   <script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js'/>
   
   <script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js'/>
   
   <script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js'/>
   
   <script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js'/>
   
   <script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js'/>
   
   <script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js'/>
   
   
3. Juste avant la balise </body>, copier le code suivant qui permet d'initialiser le composant. Il doit se trouver à la fin car le DOM doit être complètement chargé pour pouvoir le détecter.
   
   <script language="javascript">
   dp.SyntaxHighlighter.BloggerMode();
   dp.SyntaxHighlighter.HighlightAll('code');
   </script>
   
   
4. Comme je n'ai pas réussi à lier la feuille de style CSS par une balise <link> pour que ça fonctionne avec Firefox, il m'a fallu ouvrir le fichier http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css et copier le code CSS et le coller avant la ligne ]]></b:skin>. Le mieux est de le placer à la fin des CSS définis par Blogger sinon la taille du texte sera changée (dans mon cas, le texte avait considérablement grossit).
5. Placer le code source entre la balise suivante. Prenez soin d'indiquer dans l'attribut "class" le langage à colorer :
   
   <pre name="code" class="PHP">code à placer ici</pre>
   
   
6. Vous devriez voir l'exemple ci-dessous avec la coloration syntaxique :
   

$var = 1;
if ($var == 1) {
  echo 'OK';
}