Afficher du code source sans plugin dans WordPress

L’affichage de code source comme du HTML ou du PHP dans un article requiert quelques adaptations techniques.

Procédure de conversion du code source via TinyMCE

Voici la procédure que je suis pour partager les astuces PHP sur WordPress :

1. Créez un nouvel article ou une nouvelle page depuis votre administration WordPress ;
2. Dans la zone de saisie de texte en mode Visuel, collez votre bout de code source – PHP par exemple ;
3. Cliquez dessus pour placer le curseur dans la ligne de code puis déroulez le menu Format. Choisissez Pré-formaté, cela aura pour effet d’entourer le code de balises <pre> ;
4. Vérifiez que le code a bien été converti en HTML en passant par l’onglet HTML de TinyMCE (l’éditeur de WordPress) ;
5. Vous remarquerez que les guillemets ouvrant donne ceci < et les fermants > preuve de la conversion ;

En résumé, il suffit de coller du code dans l’éditeur puis de cliquez sur le bouton du mode HTML pour convertir le code. N’oubliez pas d’ajouter les balises <pre> et le tour est joué !

Adaptation visuelle via CSS

Pour donner un aspect programmation à vos lignes de code, rendez-vous dans Apparence puis Editeur. Modifiez ensuite le fichier style.css de votre thème.

Recherchez tout d’abord si la balise pre est présente ou non. Si ce n’est pas le cas, ajoutez des propriétés CSS dans le même genre que celles-ci :

Ceci aura pour conséquence d’appliquer un style au pré-formaté.

pre {
	background:none repeat scroll #f9f9f9;
	border-left:5px solid #ccc;
	clear:both;
	font:normal normal normal 11px/18px Monaco, monospace;
	margin-bottom:18px;
	overflow:auto;
	padding:10px 15px;
}

Différence entre la balise pre et code ?

La première différence à mes yeux reste que la balise pre s’utilise pour un paragraphe alors que la balise code peut s’appliquer pour un mot dans un paragraphe.

Par exemple, si vous consultez le code source de cet article via le navigateur vous vous apercevrez que j’ai utilisé les 2 types de balises.

Il existe sans doute d’autres différences mais je ne les connais pas !

Cette technique fonctionne avec du code HTML, CSS mais notamment PHP. Je n’ai pas essayé pour d’autres langages mais je vous invite à la tester car elle présente le gros avantage de ne pas avoir recours à des plugins souvent très lourds (nombreuses feuilles de styles CSS et requêtes). La seule alternative viable comme extension reste Pastacode.