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
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).