Afficher du Code HTML/CSS/JS dans un Article WordPress

Introduction

Vous écrivez un article qui parle de HTML, de CSS, de Javascript, ou de n’importe quel autre langage de programmation, et vous décidez d’intégrer du code dans votre page pour que votre lecteur puisse voir en détails de quoi il est question. Afin de faciliter la lecture et la compréhension de vos codes, ces derniers doivent au moins apparaître :

  • avec une police de type monospace
  • avec l’affichage du résultat
  • sélectionnable (ou du moins, copiable en son intégralité – pas d’affichage du code sous forme d’image donc)
  • avec des numéros de ligne
  • colorisés de manière sémantiques

Si la première condition est facilement réalisable en css, les deux dernières demanderont plus de moyens. Ainsi nous pouvons distinguer trois façons d’arriver à ce résultat. Je ne rentrerai pas cependant dans un comparatif de toutes les offres possibles dans chaque catégorie, cela dépasserait mon champs d’expertise, mais un tour d’horizon des possibilités permettra déjà d’y voir plus clair.

Via un plugin WordPress

Je ne le répéterai jamais assez, un des points forts de WordPress, c’est ses plugins. Souvent, quand on cherche à faire un truc dans WordPress, il y a plugin qui peut le faire. Et la colorisation syntaxique n’échappe pas à la règle. Je peux vous conseiller Crayon Synthax Highlighter qui contrairement à de nombreux autres plugins de ce type, n’a pas besoin de shortcodes et peut être utilisé directement avec les balises HTML 5.

Via javascript externe

Cette solution est enviseable aussi, sans passer par des plugins donc, mais en utilisant simplement des scripts externes. Le fait est que de nombreux plugins ne sont en fait que ces fameux scripts, “encapsulés” d’une manière ou d’une autre sous forme de plugins (il y a donc parfois plusieurs plugins issus d’un même script).

L’intérêt de les utiliser en plugins plutôt qu’en externe, c’est d’avoir les mises à jours des scripts plus facilement, et de rendre l’intégration plus aisée (mais il se peut que le script de votre choix n’existe pas sous la forme de plugin). Prism.js fais partie des réferences dans le domaine.

Via un service externe (dit Code Playground)

L’avantage des services externes, c’est la puissance des outils qu’ils mettent à disposition. Vous écrivez vos codes sur le site du service en question et vous pouvez intégrer votre code avec un simple embed. Ce sera en général plus lourd à charger (faisant appel à d’autres serveurs, avec des fichiers supplémentaires pour le style etc…), moins personnalisable, et moins de format seront pris en compte (ces Code Playground tendent à se spécialiser dans certains langages plutôt que d’autres), mais vous aurez accès à tous un tas de fonctions très pratiques : l’affichage du résultat se fait sans passer par une page externe (même en embed), le code source des articles est épurés (les codes, parfois en centaines/milliers de lignes, que vous montrez ne sont pas dans le corps de l’article lui-même, facilitant la rédaction de celui-ci), et vous bénificiez d’autres fonction propres à ce type de services (bien que tous ne le font pas), comme les forks, l’actualisation automatique, l’édition collaborative etc…

N’ayant besoin que de montrer du HTML, du CSS ou du Javascript, mon choix s’est porté sur CodePen, pour son affichage embed en onglet, son actualisation automatique du résultat au fur et à mesure de la rédaction, et tout un tas de petites astuces ergonomiques très bien pensées.

À la rigueur si un jour j’ai besoin de montrer sur un article un autre type de langage, ou si j’ai besoin d’avoir d’autres fonctionnalités, je me tournerais très surement vers un autre service de ce type, ou vers Gists de GitHub, pour ses fonctionnalités en termes de branches, historique de version, collaboration etc…, ou vers un des plugins mentionnés ci-dessus (selon besoins) 🙂 Si un article est du type “plein de petites lignes de codes à insérer dans différents fichiers, l’utilisation d’un service externe paraît inadaptée.

Se pose la question bien sûr la question habituelle : Est-il bon d’utiliser des services externes ou faut-il tout centraliser sur son serveur  ? Quels sont les risques d’un changement des conditions d’utilisations ou d’une fermeture du service ? Ceci est l’objet d’un débat plus large, mais pour l’instant, j’ai choisi de faire confiance 🙂

Vous aurez une démonstration dès mon prochain article 😀

Infos

7 of the Best Code Playgrounds par Craig Buckler
Do you still use plugin for Syntax Highlighting ? Its Time to reconsider it by Vivek R

  • Tes articles sont des mines d’informations ! Clairs et de plus en plus développés ! Continues à partager !

  • Merci beaucoup 😀 😀
    J’ai pensé à toi en l’écrivant, je me suis dit que t’aurais surement besoin d’intégrer du code un jour 🙂

    Et oui il y en aura d’autres. Il y en a un de plus de 2700 mots préparation (le plus long jusqu’à présent :P)

  • djmehhh

    Bonjour, je suis débutant dans le monde de wordpress,
    lorsque je rentre du code source dans la case text, celui ci ne génère pas le résultat escompté mais se retrouve tel quel dans mon visuel… pourquoi ? Par ex, j’ai récemment généré un code pour le bouton “acheter” de paypal, mais une fois intégré dans l’article, c’est le code qui apparait.

    j’espère ne pas avoir enlevé quelque chose dans le système… Il me semble que ça ne faisait pas ça au début….

  • Salut !
    Justement, cet article parle de comment inserer du code pour qu’il apparaisse au format code sans être interprété ^^ Si tu as suivi une de ces méthodes pour l’intégrer, il est donc normal que cela affiche le code.
    Pour insérer du code HTML de manière à ce qu’il soit interprété (comportement par défaut), tu as juste à copier le code, que t’as initialement généré – sans appliquer aucune modification lié à cet article, en mode Texte dans ton article 🙂
    Il me semble que PayPal à un générateur de code à intégrer d’ailleurs 🙂 il me semble !