Etant donné que j'ai l'intention de poster quelques bouts de codes sur ce blog, la coloration syntaxique permettra une lecture du code beaucoup plus agréable. Je me suis donc mis à la recherche d'une solution pour Movable Type 4.
Les plugins
Je me suis tout d'abord penché vers les plugins pour Movable Type. Il en existe quelques-uns comme CodeBeautifier et MT Colorer mais ils ne sont malheureusement pas compatible avec MT 4.
Javascript
Je me suis donc tourné vers le Javascript où deux librairies ressortent le plus souvent : star-light et SyntaxHighlighter.
Star-light supporte peu de langages par rapport à SyntaxHighlighter qui semble également plus complet. C'est donc ce dernier que j'ai choisi.
Je vais donc vous montrer comment l'installer. C'est assez simple et rapide.
Installation de SyntaxHighlighter
La première chose à faire est de télécharger l'archive puis de décompresser tous les fichiers dans le dossier mt-static de votre serveur.
Ils sont ainsi disponible sur le web. Par exemple, tous mes fichiers sont disponibles à l'adresse : http://www.littlefox.fr/mt-static/js/dp.SyntaxHighlighter/.
Ensuite, allez dans le panneau d'administration de votre blog Movable Type et aller dans Design => Gabarits pour éditer le module de Gabarits nommé HTML Head et ajouter à la fin :
Vous pouvez voir que les <script language="javascript" src="http://www.mondomaine.fr/ mt- static/js/dp.SyntaxHighlighter /Scripts/shBrushPhp.js "> </script> permettent de décider quels sont les langages supportés.
Utiliser la coloration syntaxique sur votre blog
Pour afficher un bout de code, vous devez l'écrire dans une balise <textarea> ou <pre>
<textarea name="code" class="html" cols="60" rows="10">
Votre code...
</textarea>
<pre name="code" class="html"> Votre code... </pre>La différence entre les deux est qu'on ne peut pas mettre de code html dans entre les balises <pre>. Il faut remplacer les chevrons < et > par les codes & l t; et & g t; (sans les espaces).
Pour plus d'informations sur SyntaxHighlighter, allez sur site du projet où vous pouvez retrouver la liste des langages supportés et les options de configuration.
| 