Comment afficher du code dans les articles de WordPress

L’un des problèmes les plus courants que rencontrent les nouveaux utilisateurs de WordPress est l’affichage du code dans les articles. Le problème survient lorsqu’un utilisateur tente de partager un extrait de code dans ses articles. Par défaut, WordPress filtre le code et il devient impossible à lire. Dans cet article, je vais montrer comment afficher du code dans les articles de WordPress.

Utiliser les entités HTML pour afficher du code dans les articles WordPress

Les entités HTML sont des codes spéciaux qui sont analysés par les navigateurs pour afficher le caractère associé à cette entité particulière. Par exemple :

• &amp ; devient &
• &lt ; devient <
• &gt ; devient >

En utilisant les entités HTML, vous pouvez afficher du code dans vos articles WordPress.

<div class="awesome"&gt ; sera affiché dans le navigateur comme ceci :

<div class="awesome">

Cette méthode est particulièrement utile si vous ne souhaitez afficher que quelques lignes de code. Cependant, cette méthode peut être difficile à appliquer manuellement pour plusieurs lignes de code.

Pour résoudre ce problème, vous pouvez utiliser un encodeur d’entités HTML en ligne, comme celui-ci. Mettez simplement le code que vous souhaitez convertir et cliquez sur le bouton “Encoder”. Il convertira votre code en entités HTML et vous pourrez coller ce code en toute sécurité à l’intérieur de la balise <code></code>.

Utilisation d’un plugin pour afficher le code dans les articles WordPress

Si vous partagez fréquemment des extraits de code dans vos articles, alors les méthodes mentionnées ci-dessus ne vous conviendront pas. La première chose à faire est d’installer et d’activer le plugin SyntaxHighlighter Evolved. Il vous évitera d’avoir à convertir le code en entités HTML. De plus, il mettra en évidence le code pour l’afficher dans un format beaucoup plus lisible.

Tout ce que vous avez à faire, c’est d’entourer votre contenu de balises linguistiques spécifiques. Par exemple, si vous partagez un code qui est principalement en PHP, vous pouvez l’entourer de la manière suivante :

<?php
function themelab_demo_code() { 
$i = 1 ;
while ($i <= 10) :
    echo $i."<br />" ;
    $i++ ;
endwhile ;
}
themelab_demo_code() ;
?>

Il apparaîtra sur votre site, comme ceci :

<?php
function themelab_demo_code() { 
$i = 1;
while ($i <= 10):
    echo $i."<br />";
    $i++;
endwhile;
}
themelab_demo_code();
?>

Pour les différentes langues, il existe différents alias que vous pouvez utiliser. Les alias les plus couramment utilisés sont les suivants :

• Pour afficher du code HTML, utilisez

• Pour le CSS, utilisez .
• Pour MySQL, utilisez
• Pour Javascript utilisez ceci :

J’espère que cet article vous a aidé à afficher du code dans les articles et les pages de WordPress.

Si vous avez aimé cet article, rejoignez ThemeLab sur Twitter et Google+.