Afficher du code dans WordPress

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

En vedette : Canon EOS 5D MkII Nikon D700 Word gratuit Configuration Azureus

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 :

Autres articles similaires : Comment nettoyer votre code source C à toute vitesse WordPress et passage en PHP5 Plus d’1 Go de DRAM sous Linux Google gaga feed des réponses.

Publié le 21 avril 2007 à 16:07.
D'autres articles similaires dans Blog, Créér un site, HTML et CSS, Java, Nouveau site, PHP, WordPress.