lundi 18 août 2008

Syntaxhighlighter pour coloriser la syntaxe de vos extraits de code

Syntaxhighlighter est une super petite librairie javascript pour coloriser et numéroter vos extraits de code. C'est elle que j'utilise pour coloriser les extraits de code que je vous donne sur le journalDeGuillaume.
Voici un exemple de ce que ça donne :

<?php
if ($i == 0) {
echo "i égale 0";
} elseif ($i == 1) {
echo "i égale 1";
} elseif ($i == 2) {
echo "i égale 2";
}
?>
C'est beau non ! Ce que j'aime bien dans cette librairie, c'est qu'elle est facilement personnalisable, car celle-ci a une approche modulaire. Chaque langage est un petit module JS qui est charger par le moteur de la librairie. Il est donc relativement facile de développer son propre module pour un langage qui ne serait pas pris en compte. Pour savoir comment mettre en œuvre cette librairie, Lire la suite...

  1. Dans un premier temps, il faut télécharger la librairie syntaxhighlighter. Allez sur leur site, et prenez la version la plus récente.
  2. Ensuite il faut héberger les différents scripts JS et la CSS de mise en forme sur un serveur. Ou bien copier/coller le contenu des scripts et de la CSS dans le code source de votre page. Je ne vous fais pas l'affront de vous expliquez comment faire, car si vous avez besoin de cette librairie pour faire un exposer de fragment de code, je suppose que vous avez une certaine maîtrise de la chose.
  3. Si vous avez héberger les scripts il vous faut maintenant les linker sur votre page.

    <link type="text/css" rel="stylesheet" href="css/SyntaxHighlighter.css"></link>
    <script language="javascript" src="js/shCore.js"></script>
    <script language="javascript" src="js/shBrushCSharp.js"></script>
    <script language="javascript" src="js/shBrushXml.js"></script>

    Le script le plus important est le shCore.js (moteur de la librairie) et la feuille de style. Le shCore, va s"occuper de charger les différents module de la librairie. Après si vous exposez que des codes xml, vous n'avez pas besoin du module shBrushCsharp.js. Donc faite le tri dans les module et ne charger que ceux dont vous avez besoin.

  4. Il ne faut pas oublier d'exécuter le code JS. Il ne suffit pas juste d'inclure les sources. Pour exécuter la librairie, vous devez également ajouter en bas de votre page les quelques lignes suivantes :

    <script language="javascript">
    dp.SyntaxHighlighter.ClipboardSwf = '/flash/clipboard.swf';
    dp.SyntaxHighlighter.HighlightAll('code');
    </script>
  5. Le petit bout de code ci-dessus va rechercher dans le code source de la page toute les balise <pre name="code"> ou les balise <textarea name="code">
  6. Pour indiquer quel type de coloration syntaxique dois être appliqué au code, il ne vous reste plus qu'a préciser dans la balise pre ou textarea la class qui convient. (cf : liste des class supporté)
  7. Voici un exemple ! c'est toujours mieux et plus parlant. Alors voilà la code :
    <html>
    <head>
    <title>Exemple syntaxhighlighter</title>
    </head>
    <body>
    <p id="tutu" class="test toto">Voici un bel exemple</p>
    </body>
    </html>

    et voici le résultat :

    <html>
    <head>
    <title>Exemple syntaxhighlighter</title>
    </head>
    <body>
    <p id="tutu" class="test toto">Voici un bel exemple</p>
    </body>
    </html>

0 commentaires: