(Mise à jour le 21 août 2008 à 22:40)
Depuis un moment, je cherchais avec plus ou moins d’ardeur, un plugin permettant d’afficher du code proprement dans un article sous WordPress. J’utilisais jusqu’ici Dean’s Code Highlighter qui ne me satisfaisait pas totalement, particulièrement pour la présentation de code html.
Christine préparant un nouvel article m’a fait part elle aussi de ses difficultés, notamment pour faire apparaître :
98556ed2f624ef5f324648dea059be14000
J’ai enfin trouvé, grâce à Christine, le plugin qui fait presque ce que je veux. Il s’agit de WP-Syntax. Ce plugin affiche proprement et avec coloration syntaxique aussi bien du code html que du code php.
Pour afficher du code php
il faut saisir :
<pre lang="php">
<?php
function foo() {
echo "Bonjour le monde !n ;
}
?>
</pre>ce qui affiche :
98556ed2f624ef5f324648dea059be14001
Pour afficher du code html
il faut saisir :
<pre lang="html"> mon texte en html </pre>Ajout du 2 août 2008 : pour bénéficier de la coloration syntaxique avec du code html, il vaut mieux utiliser les balises html4strict ou xml.
<pre lang="html4strict"> mon texte en html </pre>ou
<pre lang="xml"> mon texte en html </pre>ce qui affiche :
98556ed2f624ef5f324648dea059be14002
Afficher des feuilles de style
Pour afficher la coloration syntaxique pour une feuille de style, il faut utiliser la balise css
<pre lang="css"> mon exemple de feuille de style </pre>ce qui affiche :
98556ed2f624ef5f324648dea059be14003
Numéroter les lignes
Il est possible de numéroter les lignes de code en spécifiant :
<pre lang="php"> line="1"
<?php
function foo() {
echo "Bonjour le monde !n ;
}
?>
</pre>ce qui affiche :
98556ed2f624ef5f324648dea059be14004
Pour commencer la numérotation depuis un autre chiffre que le 1, il suffit de saisir le numéro souhaité.
Ce plugin permet de présenter également de nombreux autres langages.
Compatibilité avec tous les navigateurs
Un seul petit problème : cette version beta n’affiche pas correctement le code sous Firefox et Opera (navigateurs qui respectent le plus les standards du web !), ni sous Safari, lorsque celui-ci se trouve dans un bloc avec un ascenseur. Vous pouvez en voir une exemple sur la page dKret : créer une feuille de style . L’affichage sous Internet Explorer est parfait !
Ajout du 1er août 2008 : afin de permettre un affichage correct sous tous les navigateurs, je vous invite à modifier la feuille de style de votre thème en ajoutant les lignes suivantes (que Yin_Yin mentionne sur son blog) :
98556ed2f624ef5f324648dea059be14005
Ecrit par Lise - Site