Insérer des exemples de code dans vos articles WordPress

Valentin
5 Déc 2023
WordPress

Savez-vous comment faire pour insérer des exemples de code dans un article WordPress?

Vous avez probablement déjà vu des sites qui proposent des bouts de code, tout comme Bloginfos.com, afin que les utilisateurs puissent profiter de ces exemples de code dans leurs sites.

Plutôt que d’utiliser des plugin, nombre d’utilisateurs préfèrent utiliser des bouts de code, déjà testés, afin de rajouter des fonctions et ce sans risquer de ralentir leur site.

Comment insérer des exemples de code?

Ils existent plusieurs solutions simples pour insérer des exemples de code dans un article WordPress. Il y a la méthode purement « manuelle », l’utilisation d’un plugin ou l’utilisation d’un service.

Voyons ensemble les différentes options, leurs avantages et leurs inconvénients.

La solution simple

La solution la plus simple pour insérer des exemples de code dans un article WordPress est de passer en mode Texte dans l’éditeur. Cependant, il y a certaines choses à noter.

Tout d’abord, il faut coder certains caractères « spéciaux » dans le code, sinon ils seront interprétés comme faisant partie de la page, comme par exemple le caractère » & « , et cela pourrait générer de gros soucis d’affichage. Ne vous inquiétez pas, il ne faut pas coder individuellement chacun des caractères spéciaux. Il existe pour ce faire des outils en ligne:

D’autre part, vous pouvez insérer des exemples d’une ligne de code en utilisant les balises <code>.voici du code.</code>. Pour les exemples multi-lignes vous devrez faire précéder la balise code de la balise < pre >, ce qui donne:

<pre> 
<code> 
... lignes de code 
</code>
</pre>

Cela permet de mieux distinguer les indentations et l’exemple devient plus clair.

Mais ce nest pas tout. Si vous souhaitez afficher des exemples de codes pertinents au sein de vos article, vous devrez également coder les crochets, [ et ], qui sont utilisés dans les shortcodes, tels que [Gallery], faute de quoi le shortode sera interprété logiquement, et pour [Gallery] cela donnera:

En résumé:

Avantages: Indépendant des plugin et des services, pas de baisse de performance du site.

Inconvénients: pas de coloration syntaxique, pas de numérotation automatique des lignes, vous avez plusieurs caractères à « coder manuellement »

Utilisation d’un plugin

Comme cela arrive très souvent sous WordPress, pour insérer des exemples de code dans vos articles, il existe un plugin, pour cela aussi!

A vrai dire, il existe plusieurs plugin qui vous permettent d’afficher des exemples de code plus facilement, tout en apportant certains avantages aux visiteurs.

Parmi ces plugin, il y a Crayon Syntax Highlighter, que personnellement je préfère pour sa simplicité d’utilisation. Pour insérer du code, il suffit de cliquer sur le bouton « [icon name= »angle-left » class= » » unprefixed_class= » »] [icon name= »angle-right » class= » » unprefixed_class= » »] »

et ensuite, dans la fenêtre qui s’ouvre, après avoir choisi le langage que vous allez insérer (ce n’est pas obligatoire), le thème que vous voulez utiliser (ce n’est pas non plus obligatoire), et ensuite simplement collez le code et cliquez sur le bouton Ajouter.

pour obtenir le résultat suivant:

<?php 
  public static function emailValid($string) 
    { 
        if (preg_match ("/^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+\.[A-Za-z]{2,6}$/", $string)) 
            return true; 
    } 
?>

En utilisant un plugin, vous n’avez pas besoin de masquer les caractères spéciaux et, le code affiché inclut la coloration syntaxique, la numérotation automatique des lignes, vous pouvez même mettre en évidence un point spécifique dans le code, afin que les visiteurs puissent mieux le remarquer.

Exemples - SyntaxHighlighter Evolved — *Exemples de code affiché par SyntaxHighlighter Evolved*

Dans l’image ci-dessus, vous pouvez voir un exemple de code, tel qu’il est affiché par le plugin Syntax Highlighter Evolved. Vous pourrez constater que l’on peut clairement distinguer la coloration syntaxique et la numérotation des lignes.

Autre avantage vous pouvez avoir un mix de code HTML, CSS et Javascript, sans que cela pose de problème.

Seul défaut très léger, de Syntax Highlighter Evolved, il faut passer en mode texte afin d’insérer les balises correspondante à ce que vous voulez insérer, avant de coller le code.

En résumé:

Avantages: la coloration syntaxique, la numérotation automatique des lignes, inutile de coder les caractères spéciaux et vos visiteurs peuvent télécharger les exemples de code.

Inconvénients: Il faut utiliser un plugin, utilisation de ressources supplémentaires sur le serveur (CSS, Javascript): Vous pourriez avoir une perte de performance notable, selon le cas. Il faut malgré tout continuer à coder les shortcodes, tels que [ gallery ]

Utiliser un service: GitHub Gist ou CodePen

Beaucoup de personnes travaillant sur le web utilisent des plateformes comme GitHub ou CodePen, pour entre autres, maintenir des exemples de code. Par conséquent, il est également logique, de pouvoir intégrer simplement du code en provenance d’articles pertinents, plutôt que d’avoir à ressaisir des fragments de code entier dans votre article.

Vous pouvez soit installer un plugin comme oEmbed Gist, soit insérer du code dans le fichier functions.php de votre thème (fortement déconseillé), ou encore placer ce code dans un plugin créé spécifiquement pour votre site (fortement recommandé).

Dans tous les cas, vous n’aurez ensuite qu’à insérér l’URL du fragment de code correspondant à partir de GitHub Gist dans votre article et le système s’occupera du reste:

Exemple-insertion-oEmbed-Gist — *Exemple de code affiché par oEmbed-Gist*

Dans l’image ci-dessus, vous pouvez voir le résultat de l’insertion de code après avoir simplement inséré l’URL correspondante de GitHub Gist.

Pour les utilisateurs de CodePen il existe un plugin officiel pour intégrer des exemples de code dans WordPress.

En résumé:

Avantages: coloration syntaxique, numérotation automatique des lignes, les caractères spéciaux habituels ne doivent pas être codés, vos visiteurs bénéficient des avantages du service.

Inconvénients: Dépendant d’un service Web, utilisation de ressources supplémentaires (CSS, Javascript), il peut également être constaté une baisse notable des performances du site.

Voilà, à présent c’est à vous! En fonction de vos compétences techniques, ou de la simplicité recherchée, vous utiliserez, telle ou telle manières pour insérer du code dans vos articles WordPress

Avez vous déjà utilisé une de ces manières de faire pour insérer des exemples de code dans vos articles WordPress? Si oui, dites nous dans les commentaires, quelle technique vous avez utilisé, et pourquoi.