Insérer du code dans un article

Insérer du code dans un article édité avec WordPress relève du combat de catch.

Vous pouvez sans problème copier/coller un bout de code dans l’article comme ici :

<?php
echo(‘Hello World’);
echo(‘Ceci est une phrase beaucoup trop longue pour tenir sur une seule ligne dans le thème que j’ai choisi pour wordpress’); // Notez que ce code PHP fonctionne parfaitement !
?>

Mais je trouve :

  1. Qu’il manque un peu de coloration syntaxique ;
  2. Que les lignes de code trop longues se voient affubler d’un retour à la ligne intempestif.

C’est avec ce petit besoin supplémentaire que les ennuis commencent.

Ce petit besoin donc, nous emmène du côté des plugins et là c’est l’embarras du choix :

Sans entrer dans les détails, mon choix s’est porté sur WP-CodeBox.

Voici l’exemple précédent utilisé avec WP-CodeBox.

<?php
echo('Hello World');
echo('Ceci est une phrase beaucoup trop longue pour tenir sur une seule ligne dans le thème que j'ai choisi pour wordpress'); // Notez que ce code PHP fonctionne parfaitement !
?>

Si l’apparence gagne en lisibilité, vous noterez que les caractères « < » et « > » des ligne 1 et 4 ont été  échappés. Cela signifie qu’ils ont été remplacés par un code HTML qui évite ainsi d’exécuter du code placer dans un article.

La seule méthode que je connaisse à ce jour pour éviter ce problème est de ne plus utiliser l’éditeur visuel pour un article contenant du code de façon à obtenir ceci :

< ?php
echo('Hello World');
echo('Ceci est une phrase beaucoup trop longue pour tenir sur une seule ligne dans le thème que j'ai choisi pour wordpress'); // Notez que ce code PHP fonctionne parfaitement !
?>

Mais là encore, un space superflu sépare le « < » du « ? » à la ligne 1. Bon ok, je ne suis jamais content.

Pour ceux qui souhaitent limiter la taille de la boîte de code, ils peuvent modifier le fichier codebox.css du plugin et mettre à jour les éléments suivants :

/* codebox */
.wp_codebox {
  color: #100;
  background-color: #f9f9f9;
  border: 1px solid silver;
  margin: 0 0 1.5em 0;
  overflow: auto;
  max-height: 200px
}

/* IE FIX */
.wp_codebox {
  overflow-x: auto;
  overflow-y: auto;
  padding-bottom: expression(this.scrollWidth > this.offsetWidth ? 15 : 0);
  width: 100%;
}