Delirium Stage

J’ai recherché pendant un petit moment un script permettant de coloré syntaxiquement les parties de code que je colle sur mon blog. Sans jamais rien trouvé d’intéressant. J’avais un peu laché l’affaire mais c’est justement quand on ne cherche pas que l’on trouve. La preuve, j’ai découvert hier syntaxhighlighter, un petit script 100% javascript qui permet de s’en occuper. Petite présentation et exemples.

Présentation

SyntaxHighlighter est un script écrit entièrement en javascript permettant de colorer la syntaxe de portion de code. Mais ce n’est pas tout ! Il ajoute également les numéros de ligne et un lien pour copier le code directement dans le presse-papier. Le tout bien sur, en n’ayant à mettre le code désiré qu’entre des balises <pre> ou <textarea>.

Exemple

<?php
echo 'Hello world !';
?>

Installation

Pour installer le script, c’est tout simple. Dans un premier temps, il suffit de se rendre sur le site du projet : http://code.google.com/p/syntaxhighlighter/ et d’aller visiter la page « Downloads « pour récupérer la dernière version du script. Pour cet article, c’est la version 1.5.1 (aout 2007) que j’utiliserai étant donné que c’est la seule disponible lorsque je rédige cet article.

Pour l’installation en elle-même, c’est tout bête. Il suffit de décompresser les dossiers Scripts et Styles et de les mettre là où vous le souhaitez. Pour ma part, j’ai inséré le fichier de style dans le dossier des scripts afin de n’avoir qu’un dossier pour ce script.

Utilisation

L’utilisation est très simple puisqu’il suffit dans un premier temps de placer votre code dans un bloc <pre> de préférence, mais il est aussi possible d’utiliser les balises <textarea>.

Exemple

<pre name="code" class="php"><?php
echo 'Hello world !';
?>
</pre>

Notes

• name doit toujours avoir la valeur code
• class prend comme valeur le nom du langage que vous souhaitez colorer. Pour la liste complète des langages supportés par ce script, rendez-vous sur le wiki consacré : Langages
• Il faut remplacer les < présents dans le script par leur valeur HTML soit &lt; pour éviter tout problème d'interprétation de balises que l'on souhaite colorer et pas voir interprétées

C’est bien beau, mais il faut maintenant appeler les différents scripts à l’aide du code suivant :

<!-- La feuille de style -->
<link type="text/css" rel="stylesheet" href="./scripts/sh/SyntaxHighlighter.css"></link>
<!-- Le moteur -->
<script language="javascript" src="./scripts/sh/shCore.js"></script>
<!-- Les langages que l'on souhaite colorer (PHP, HTML par exemple ici) -->
<script language="javascript" src="./scripts/sh/shBrushPhp.js"></script>
<script language="javascript" src="./scripts/sh/shBrushXml.js"></script>
<script language="javascript">
  <!-- Ce swf sert à la copie dans le presse papier -->
  dp.SyntaxHighlighter.ClipboardSwf = './scripts/sh/clipboard.swf';
  <!-- On lance le script -->
  dp.SyntaxHighlighter.HighlightAll('code');
</script>

Il est conseillé de le mettre en fin de page. Pour ma part, je préfère mettre ça ne début de page donc j’ai créée un petit script qui me permet de n’exécuter le SH qu’une fois la page chargée (remplacant bien sur les lignes 8 à 13 du bout de code précédent).

shInit.js

init = function() {
	dp.SyntaxHighlighter.ClipboardSwf = './scripts/sh/clipboard.swf';
	dp.SyntaxHighlighter.HighlightAll('code');
}
window.onload = init;

Et voilà, votre code est maintenant coloré comme les différents bouts de codes de cette page. On s’y retrouve déjà beaucoup mieux non ? En plus la mise en place est simple et on se prend pas la tête. Que demander de plus ?

Articles sur le même sujet :

1. Réaliser un panel à onglet simple avec Mootools
2. [Javascript] Filter les extensions d’un type file
3. [Javascript] Tout sélectionner/déselectionner