Saisir du code dans un article

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 :

&nbsp

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 :

<?php
  function foo() {
    echo "Bonjour le monde !n";
  }
?>

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 :

<i>code en italique avec la balise 'i'</i>
<em>code en italique avec la balise 'em' </em> //commentaire exemple 1
<b>code en gras avec la balise 'b'</b> /*commentaire exemple 2*/
<strong>code en gras avec la balise 'strong'</strong>
 
<ul>
	<li><a href="http://liseweb.fr/BLOG/">mon lien</a></li>
	<li><font color="#6699FF">texte en couleur</font></li>
	<li><small>petite police</small></li>
	<li><big>grande police</big></li>
</ul>

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 :

.wp_fichier {
  color: #100; /* couleur du texte  */
  background-color: #FFFFFF; /*double cadre sur fond blanc */
  border: 0px solid #FFFFFF; /*suppression de la bordure */
}

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 :

1
2
3
4
5
<?php
  function foo() {
    echo "Bonjour le monde !n";
  }
?>

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

.wp_syntax {
  color: #100; /* couleur du texte standard */
/*les deux lignes suivantes suppriment le double cadre qui apparaît lorsqu'un bloc de code est saisi.*/
  background-color: #FFFFFF; /*double cadre sur fond blanc, donc "invisible" ;-) */
  border: 0px solid #FFFFFF; /*suppression de la bordure */
  margin: 0 0 1.5em 0;
  overflow: auto;
}
 
.wp_syntax pre {
	overflow: auto; /* permet un affichage correct du code avec tous les navigateurs même avec un  ascenseur */
}


Ecrit par Lise - Site

Laisser un commentaire

Votre adresse mail ne sera jamais rendue publique ni utilisée.

*Si vous écrivez un commentaire ici pour la première fois, celui-ci ne sera publié qu'après validation par un administrateur du blog. Ne l'envoyez pas plusieurs fois !
*Bien sûr, tout commentaire injurieux, publicitaire ou spam sera supprimé.
*C'est à vous maintenant !

(obligatoire)
(obligatoire)

Laisser ces deux champs tels quels :

Protégé par Invisible Defender.


  • Mentions légales
    Les différents éléments du Blog de Lise restent la propriété de leur(s) auteur(s) respectifs.


Connexion à WordPress protégée par Clef