Depuis l’ouverture de ce blog, j’ai eu quelques soucis avec la façon dont WordPress gère les caractères spéciaux et dont il les échappe….
Ce problème peut être très enervant lorsque l’on veut afficher du code dans ses articles.
Pour afficher du code source dans WordPress il existe plusieurs plugins, les 2 que j’ai testé sont :
SyntaxHighlighter Evolved : J’ai une préférence pour le rendu de ce plugin et pour les options qu’il propose (impression, copie, etc.), malheureusement suite au problèmes d’échappement que j’avais, j’en ai conclu hativement que cela venait du plugin et je l’ai abandonné au profit de WP-syntax.
Exemple de coloration synthaxiue avec SyntaxHighlight Evolved
WP-Syntax plugin : C’est le plugin que j’utilise, plus simple que le premier, il utilise les balises standards pour délimiter les portions de code.
Exemple de coloration synthaxique avec WP-Syntax
Dans le code source on a souvent des caractère spéciaux qu’il faut convertir (on parle d’échappement) pour qu’ils soient interpreté correctement dans une page HTML.
Cette opération d’échappement est effectué de façon automatique par WordPress. Pour s’en convaincre il suffit de taper un texte avec ces caractères en mode visuel (WYSIWYG : What you see is what you get) :
Caractères spéciaux en mode visuel
Et ensuite de passer en mode HTML :
Caractères spéciaux en mode HTML
On voit ainsi que le > à été convertit en son équivalent HTML >
Lorsque l’on veut afficher du code avec WP-syntax cet échappement peut poser problème, un exemple en image :
En mode Visuel on saisie le code source :
Code source en mode visuel
Puis on passe en mode HTML pour ajouter la balise et l’attribut de language (propre à WP-syntax) :
Code source en mode HTML
Code source en mode HTML : ajout de la balise PRE
Si on repasse ne mode visuel et que l’on enregistre l’article voici le résultat :
Sans attribut escaped, les caractères spéciaux ont été convertit
La solution qui n’en n’était pas une que j’ai utilisé pour bon nombre d’article jusqu’à peu, consistait à taper tout le texte en mode visuel, faire la mise en forme dans ce mode, quand l’article est fini, de passer en mode HTML pour modifier les balises P en PRE et ajouter les attributs WP-syntax et publier.
Avec ce mécanisme il ne faut surtout pas revenir en mode visuel, sinon on aura le problème.
On voit évidemment que cette « solution » n’est pas viable.
La vrai solution consiste à tagguer le bloc PRE pour indiquer à WordPress que le code est échappé, cela se fait avec l’attribut escaped= »true »
Code avec l'attribut escaped
Ce qui après publication donne le bon résultat :
Avec attribut escaped, les caractères spéciaux sont correctement affichés
Cette solution est assez peu documenté et fait planter WordPress 2.7 si vous la mettez en oeuvre.
En effet il existe un bug dans le code source de WordPress (cf. ici) et sans la mise ne oeuvre du correctif, il est impossible d’afficher du code échappé avec WordPress 2.7 et WP-syntax.
