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.

Avec l’éditeur de blocs : le bloc Code

Avec l’éditeur de blocs, l’éditeur par défaut de WordPress, le bloc Code fait tout le travail à votre place :

1. Dans un paragraphe vide, tapez /code puis validez avec la touche Entrée pour insérer le bloc Code. Taper trois accents graves (```) au début d’un paragraphe vide produit le même effet ;
2. Collez votre code tel quel, sans rien convertir ;
3. Publiez : à l’enregistrement, WordPress remplace lui-même les caractères spéciaux (<, > et &) par leurs entités HTML et entoure le code des balises <pre> et <code>.

Le bloc neutralise aussi les codes courts : un code court collé dans un bloc Code s’affiche tel quel au lieu d’être exécuté. Pour vérifier la conversion, choisissez Modifier en HTML dans le menu Options (les trois points verticaux) de la barre d’outils du bloc.

Pour un mot ou un nom de fonction au milieu d’une phrase, sélectionnez-le puis choisissez Code en ligne dans le menu Plus (la petite flèche) de la barre d’outils du bloc : WordPress l’entoure de la balise <code>. Plus rapide encore, tapez le mot entre deux accents graves, comme `get_the_title()` : la mise en forme s’applique dès le second accent.

Procédure de conversion du code source via TinyMCE (éditeur classique)

Si vous utilisez encore l’éditeur classique, avec l’extension officielle Classic Editor, voici la procédure à suivre :

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 (sélectionnez toutes les lignes si votre code en compte plusieurs) puis déroulez la liste des formats, au début de la barre d’outils, qui affiche Paragraphe par défaut. 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 Code (anciennement Texte) de l’éditeur classique ;
5. Vous remarquerez que les chevrons ouvrants (<) sont devenus <, les fermants (>) > et l’esperluette (&) &, preuve de la conversion.

En résumé, il suffit de coller du code dans l’onglet Visuel pour le convertir ; l’onglet Code ne sert qu’à vérifier le résultat. 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, ajoutez quelques règles CSS sans modifier les fichiers de votre thème, dont la prochaine mise à jour effacerait vos changements : avec un thème à blocs, rendez-vous dans Apparence > Éditeur > Styles, cliquez sur le bouton Plus (les trois points verticaux) puis sur CSS additionnel ; avec un thème classique, ouvrez Apparence > Personnaliser > CSS additionnel. Le tutoriel pour ajouter du CSS personnalisé sous WordPress détaille la méthode par Apparence > Personnaliser.

Vérifiez tout d’abord, avec l’inspecteur de votre navigateur, si votre thème met déjà en forme la balise pre. Si ce n’est pas le cas, ou si son style ne vous convient pas, ajoutez des propriétés CSS dans le même genre que celles-ci :

pre,
pre.wp-block-code {
	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;
}

Ceci aura pour conséquence d’appliquer un style au pré-formaté. Le second sélecteur, pre.wp-block-code, vise le bloc Code : sans lui, les styles que des thèmes comme Twenty Twenty-Five ou Twenty Twenty-One donnent à ce bloc l’emporteraient en partie sur les vôtres.

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.

La norme HTML précise leurs rôles : pre représente un bloc de texte préformaté, dont le navigateur conserve les espaces et les retours à la ligne, tandis que code représente un fragment de code informatique, qui peut se placer au milieu d’une phrase. Pour un bloc de code, la norme propose de combiner les deux, <pre><code>…</code></pre> : c’est exactement ce que produit le bloc Code de WordPress.

Cette technique fonctionne avec n’importe quel langage (HTML, CSS, PHP, JavaScript, SQL…), puisqu’elle se contente de convertir les caractères spéciaux, et présente le gros avantage de ne pas avoir recours à des plugins souvent très lourds (nombreuses feuilles de styles CSS et requêtes). Une extension ne devient utile que si vous tenez à la coloration syntaxique, comme Pastacode.

Pour gagner du temps dans l’éditeur classique, apprenez à ajouter des boutons dans l’éditeur visuel TinyMCE.