J'ai découvert il y a quelques semaines un (gros) bout de code génial. Bon, ce n'est pas une grande découverte, il est déjà très utilisé, mais je n'avais jamais vraiment eu besoin de ce genre de trucs jusqu'à maintenant...

Comme le dit son site, il s'agit d'un code de surlignage syntaxique, ou comment rendre des bouts de codes déjà lisibles encore plus lisibles.

L'utiliser n'est pas très compliqué, puisqu'il suffit de télécharger le dernier .zip, de le dézipper et de regarder ce qu'on trouve. Un répertoire scripts contenant en particulier shCore.js qui est le cœur de la machinerie, ainsi que plein de shBrush*.js, qui contiennent les définitions des syntaxes pour différents langages. Personnellement, je n'ai pas besoin de tout, donc je n'ai choisi de garder que ce qui m'intéresse : Bash, Php, Plain que j'utiliserai souvent, Css, JScript et Sql un peu moins, et puis aussi au cas où Diff, Perl, Python, Xml. Un dossier styles contient lui les fichiers de mise en page css, parmis lesquels shCore.css est obligatoire et ensuite shThemeDefault.css correspond au seul thème écrit en noir sur blanc (les autres font du blanc sur noir, je déteste ça). Sans oublier les trois icônes qui seront affichées dans la toolbar et l'icône de retour à la ligne.

Donc on prend tous ces fichiers, on met tout ça dans un répertoire, appelé par exemple syntaxhighlighter, à la racine de notre formidable site web qu'on adore et dont on prend soin. Il ne reste plus qu'à modifier les pages web en ayant besoin. Il faut rajouter dans l'entête html :

<script type="text/javascript" src="/syntaxhighlighter/shCore.js"></script>
  <link type="text/css" rel="stylesheet" href="/syntaxhighlighter/shCore.css"/>
  <link type="text/css" rel="stylesheet" href="/syntaxhighlighter/shThemeDefault.css"/>
  <script type="text/javascript" src="/syntaxhighlighter/shBrushPlain.js"></script>
  <script type="text/javascript" src="/syntaxhighlighter/shBrushBash.js"></script>
  <script type="text/javascript">
    SyntaxHighlighter.all();
  </script>

Ensuite, tous les paragraphes de type <pre> seront analysés, pour peu qu'on dise à quel langage ils correspondent, en ajustant la classe :

<pre class="brush: bash">

par exemple. J'ajoute aussi, pour éviter la numérotation des lignes quand il s'agit d'une simple ligne de commande :

<pre class="brush: plain; gutter: false">

Le résultat a été utilisé dans de nouvelles pages sur mon site, dédiées à des scripts dont je me sers assez souvent et que j'ai écrits pour cela. C'est là qu'on se dit que la coloration syntaxique rend le code plus lisible.

Pour info, la coloration effectuée dans les articles du blog n'est absolument pas due à SyntaxHighlighter mais à un plugin pour Dotclear nommé SyntaxeHl.