Lorsque, comme moi, vous insérez régulièrement du code dans des pages ou des billets WordPress, il peut être intéressant de le différencier du texte général et de le formater différemment.

Pour ce faire, on va utiliser les balises <pre> et <code>.

Malheureusement, elles ne sont pas toujours implémentées d’origine dans le CSS du thème WordPress utilisé.

Pour vérifier si ces balises sont incluses dans votre thème, faites un essai.

Créez un article et basculez en mode texte en cliquant sur cet onglet en haut à droite de la fenêtre d’édition :

Rédigez quelques lignes et insérez les balises <pre> et <code> comme ceci :

Ceci est ma <code>première ligne</code> de texte.

<pre>Et ceci est mon premier bloc de texte.
Il va s’étendre sur plusieurs lignes.
Sur plusieurs lignes…
Sur de nombreuses lignes…</pre>

Cliquez sur Aperçu et regardez si la mise en forme de vos balises est différente du corps du texte. Vous devriez obtenir quelques chose comme ceci :

Ceci est ma première ligne de texte.

Et ceci est mon premier bloc de texte.
Il va s'étendre sur plusieurs lignes.
Sur plusieurs lignes...
Sur de nombreuses lignes...

La balise <code> porte sur une mise en forme de quelques mots tandis que la balise <pre> s’étend à tout un paragraphe.

Si rien ne se passe, c’est que les balises dont on parle ne sont pas présentes dans le CSS de votre thème.

Voici comment les installer :

Dans le menu latéral à gauche, sélectionnez Apparence, puis Éditeur.

Repérez si les balises <pre> et <code> sont présentes. Si ce n’est pas le cas, on peut ajouter ces lignes :

/* #Pre & Code
================================================== */    

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

Une fois la manipulation faite, cliquez sur « Mettre à jour le fichier ».

Voilà ! Votre thème intègre maintenant les balises <pre> et <code>.