Quand, comme moi, on souhaite inclure des morceaux de code dans un article WordPress, cela devient vite une sérieuse galère. En fait WP n’a pas vraiment prévu ce cas et il se pose une quantité de problèmes plus ou moins graves. Ceux que j’ai rencontrés jusqu’ici :
- Les <?php disparaissent (sauf acrobaties manuelles)
- Un certain nombre de caractères ne s’affichent pas (ou mal)
- La présentation est assez pitoyable quand on utilise que <code>
J’ai donc recherché un plug-in (presque tout dans WordPress se fait par l’ajout de ces merveilleux petits bouts de logiciel qui peuvent se rajouter facilement à la configuration de base) qui soit adapté à cette tâche, facile à installer (et je ne tiens pas à faire une maintenance intensive pour cette fonctionnalité), facile à utiliser.
Voici donc un résumé de ceux que j’ai regardé et de mon opinion les concernant.
Code markup v1.1.1
Syntaxe
Il suffit d’encadrer son code entre <pre><code> et </code></pre>.
A mon avis
Pour :
- Evite bien la transformation du code par WordPress
- Il reste possible de rajouter du formattage manuel dans le code inclus
- Compatible WordPress 1.5, 2.0 et 2.1
- Un seul fichier de plugin, à activer par le tableau de bord WP
Contre :
- Pas de coloration syntaxique
ElasticDog Code viewer v1.1
Syntaxe
Le code est stocké dans un fichier externe, est affiché avec indentation et retour à la ligne automatique, peut-être téléchargé séparément.
A mon avis
Pour :
- Présentation assez souple (par exemple, numérotation des ligne)
- Le stockage dans un fichier externe permet de ne pas avoir à répéter le code (s’il apparaît dans plusieurs articles ou en plusieurs endroits)
- Un seul fichier de plugin, à activer par le tableau de bord WP ; plus une procédure d’installation.
Contre :
- Stockage dans un fichier texte séparé : particulièrement lourd pour des petits morceaux de code
Coffe2code Preserve code Formatting v0.9
Syntaxe
Il suffit d’encadrer son code entre <pre><code> et </code></pre> (d’autres tags peuvent aussi être définis).
A mon avis
Pour :
- Evite bien la transformation du code par WordPress
- Un seul fichier de plugin, à activer par le tableau de bord WP
Contre :
- Pas mis à jour depuis 2005. A-t-il seulement été testé avec WordPress v2.1 ?
- Pas de coloration syntaxique
Priyadi’s Code Autoescape v2.0
Syntaxe
Il suffit d’encadrer son code entre <pre><code> et </code></pre>.
A mon avis
Pour :
- Evite bien la transformation du code par WordPress
- Compatible WordPress 1.5, 2.0 et 2.1
- Un seul fichier de plugin, à activer par le tableau de bord WP
Contre :
- Pas de coloration syntaxique
CoolCode
A mon avis
Pour :
- Apporte aussi une fonction de coloration syntaxique
Contre :
- Le site est en Chinois (je n’ai pas osé faire une vraie évaluation).
Dean Code Source Syntax highlighting v1.1
Syntaxe
Il suffit d’encadrer son code entre <pre lang=”php”> et </pre> (en précisant le langage PHP, ou tout autre langage).
A mon avis
Pour :
- Evite bien la transformation du code par WordPress
- Apporte aussi une fonction de coloration syntaxique (adaptée à de nombreux langages).
- Compatible WordPress 1.5+
- Un seul fichier de plugin, à activer par le tableau de bord WP, plus un fichier CSS pour gérer la présentation
Contre :
- Il faut définir des tags CSS (problème mineur parce que, pour les autres, c’est seulement préférable)
RobM Code entities v1.1
Syntaxe
Au vu de l’évolution des plugins de ce type, l’auteur lui-même conseille aujourd’hui plutôt Priyadi’s Code Autoescape.
Conclusion
Comme vous pouvez l’imaginer à partir des informations données ci-dessus, mon choix s’est donc orienté vers Dean Code Source Syntax highlighting que j’utilise maintenant pour Roumazeilles.net. L’argument le plus important a clairement été la possibilité d’assurer une coloration syntaxique qui apporte une lisibilité accrue y compris pour des petits morceaux de code (confort pour les lecteurs du site).
Je n’affirme pas avoir tout vu dans cette comparaison (benchmarking) mais cela m’a mené à faire un choix raisonné dont je souhaitais partager avec vous les raisons. Vous avez (ou allez) peut-être faire un choix différent ; n’hésitez pas à nous expliquer pourquoi ou comment.
Exemples
Code PHP
Voici comment se présente un morceau de source PHP :
CSS code
Voici l’affichage d’un fichier CSS :
/*******************************/
/* Links */
/*******************************/
a:link { color:#a0a010 }
a:visited { color:#606000 }
a:hover { color:#e0e020; text-decoration: underline }
a:active { color:#e0e020; text-decoration: underline }
Laisser un commentaire