WordPress: coloration syntaxique

Présenter du code source sur un site est assez simple: il suffit d’encadrer ce code avec les balises HTML <code> ou <pre>. Cette méthode pose cependant des problèmes de présentation, et de gestion des caractères spéciaux propres à chaque langage. La communauté de WordPress propose plusieurs plugins facilitant la présentation de code source. Je vous propose d’en faire une rapide comparaison.

Introduction

Sans plugin, le positionnement de code source entre les balises <code> ou <pre> génère quelques inconvénients:

  • L’indentation ou la mise en forme n’est pas forcement respectée,
  • Le source n’est pas mis en valeur (pas de gras, de couleur),
  • Il faut souvent retravailler le code pour éviter des défauts d’affichage liés aux caractères spéciaux.

Utiliser un plugin apporte donc plusieurs avantages:

  • Respect de la présentation et notamment des indentations,
  • Mise en valeur du code, qui est plus clair et lisible,
  • Utilisation directe des sources, sans transformation ou formatage.

La recherche sur le site de WordPress donne une dizaine de plugins. Pour gagner du temps, j’ai réalisé une première sélection, sans essai, à partir des notations obtenues par les plugins, ainsi que les dates de mises à jour (récentes ou pas).

Cette première sélection nous laisse 5 plugins que je vous propose d’essayer.

Comparatif

SyntaxHighlighter Plus

Lien: https://wordpress.org/plugins/syntaxhighlighter-plus/
La particularité de ce plugin, est de ne pas employer les tags habituels <code> ou <pre>. Il propose plusieurs nouveaux tags:

  • [sourcecode language='css']code here[/sourcecode]
  • [source language='css']code here[/source]
  • [code language='css']code here[/code]
  • [sourcecode lang='css']code here[/sourcecode]
  • [source lang='css']code here[/source]
  • [code lang='css']code here[/code]
  • [sourcecode='css']code here[/sourcecode]
  • [source='css']code here[/source]
  • [code='css']code here[/code]
  • [lang='css']code here[/lang]
  • [css]code here[/css] (or any of the supported language).

Au niveau de la présentation, SyntaxHighlighter Plus est à mi-chemin entre WP-CodeBox et les plugins les plus simples. Les lignes paires et impaires peuvent être colorées différemment.
Exemple de présentation générée par SyntaxHighlighter Plus

Le système de tag employé a deux inconvénients:

  • Je pense que le plugin intervient sur l’article au moment de sa sauvegarde pour gérer notamment les caractères spéciaux,
  • Tous ces caractères sont transformés dans l’article en code HTML, ce qui complique les éditions ultérieures du code présenté dans les articles.

Dean’s Code Highlighter

Lien: https://wordpress.org/plugins/source-code-syntax-highlighting-plugin-for-wordpress

Il s’agit certainement du plugin le plus simple. Il utilise les mêmes balises que les plugins basés sur GeSHi. Il n’offre pas d’option particulière.

La spécificité de ce plugin est d’afficher le code sous la forme de listes ul/li ou ol/li, ce qui me gêne un peu: d’abord les pages HTML générées sont plutôt lourdes, et la présentation est difficile à personnaliser.

Google Syntax Highlighter for WordPress

Lien: https://wordpress.org/plugins/google-syntax-highlighter/

Ce plug-in utilise une syntaxe particulière: <pre name= »code » class »php »> … </pre>.

Comme le montre l’exemple ci-dessus, la mise en forme n’est pas toujours parfaite, et je n’ai pas vraiment réussi à comprendre pourquoi, ni corriger ces erreurs.

WP-Codebox

Lien: https://wordpress.org/plugins/wp-codebox/

WP-CodeBox est l’un des plugins les plus complets. Il reprend la syntaxe des plugins basés sur GeSHi, en y ajoutant quelques options permettant de visualiser le source dans une page à part, ou de le télécharger …
Exemple de présentation générée par WP-CodeBox
Ce plugin est le seul à proposer une page d’option.
Page d'option du plugin WP-CodeBox

WP-Syntax

Lien: https://wordpress.org/plugins/wp-syntax/

WP-Syntax fait partie du groupe de plugin utilisant GeSHi, et utilise donc la même syntaxe: <pre lang="LANGUAGE" line="1"> and </pre>.
Exemple de présentation générée par WP-Syntax
La colorisation syntaxique est classique. Le plugin ne gère pas de couleur différente pour les lignes paires et impaires.
L’affichage peut être relativement simple à modifier, le plugin n’utilisant qu’un seul style (.wp_syntax).
J’ai rencontré un problème avec la largeur de la zone d’affichage, qui ne s’adapte pas, ni en fonction de la largeur du navigateur, ni en fonction des longueurs des lignes du code à afficher.

Résumé

Plugin Avantages Inconvénients
SyntaxHighlighter Plus – Possibilité d’utiliser plusieurs syntaxes
– Colorisation des lignes paires / impaires (meilleure visibilité)
– Syntaxe des tags non standard
– Transformation du code inséré dans les articles
WP-CodeBox – Nombreuses options
– Fiabilité
– Personnalisation un peu compliquée,
– Pas de colorisation des lignes paires/impaires
WP-Syntax – Simple,
– Personnalisation aisée,
– Mauvaise gestion de la largeur
– Pas de colorisation des lignes paires/impaires
Dean’s Code Highlighter – Simple – Pages HTML générées plutôt lourdes,
– Personnalisation compliquée.
Google Syntax Highlighter for WordPress – Coloration standard – Mise en page parfois problématique

Conclusion

Comme nous venons de la voir, les différents plugins obtiennent des résultats relativement similaires. La différence se fait sur de petits détails de présentation.
Le choix est donc difficile, mais il faut en faire un. WP-CodeBox est le plug-in qui pose finalement le moins de problème: pas de code spéciaux, pas de problème de largeur, pas de problème de mise en forme … Il s’agit donc, pour l’instant, du meilleur compromis, même s’il lui manque quelques petits éléments, comme la colorisation différente des lignes paires et impaires.

Je conseille, pour ne pas avoir de problème avec les feuilles de styles, d’éditer le fichier css/codebox.css et de commenter les styles body et a. La version 1.2 corrige ce bug.

3 thoughts on “WordPress: coloration syntaxique”

  1. Bonjour,

    J’ai tester SyntaxHighlighter Plus, j’ai bien accrocher sur la mise en forme du code au niveau de la coloration, par contre au niveau de l’indentation, il ne respecte pas toujours… Je me suis donc tourné vers codebox mais je ne suis pas emballé quant à la mise en page :s

  2. Depuis ce comparatif, j’ai fait d’autres tests, et suis tombé sur quelques problèmes. Mon opinion a donc évolué, et je suis en retard sur la mise a jour de l’article.
    Pour résumer, il y a deux types de plugins:
    – ceux qui utilisent du javascript (WP-Codebox en fait partie)
    – ceux qui n’en utilisent pas.

    Les plugins de la premières catégories ont deux inconvénients:
    – ils demandent le chargement de scripts JS souvent lourds (alourdissement des pages, et lenteur)
    – ils peuvent entrer en conflit avec d’autres plugins utilisant la même librairie JS

    J’ai rencontré ce problème avec WP-Codebox. C’est pourquoi je suis finalement resté sur WP-Syntax.

    Les plugins de la seconde catégorie n’ont pas ces problèmes de compatibilité, mais sont en général plus basiques, et génèrent souvent un code HTML assez lourd.

    Il faut donc faire un choix en fonction des besoins, et des problèmes rencontrés.

  3. Très bon comparatif, j’ai testé wp-syntax et dean mais le problème est que j’utilise des commentaires un peu long… et je cherchais un plugin qui me permette d’avoir un autoscroll… Codebox est donc parfait

Commentaires clos.