Afficher du code source dans un article en ligne.

Du code source afficher en ligne

Lorsque nous souhaitons afficher un code source dans un article, celui-ci est traité comme du code HTML et affiche le code interprété par l’écran, c’est notament le cas pour le CMS WordPress.

Exemple :

Ici un titre dans une balise h1

Mon code affiché est dans une balise p

Ici aussi dans une autre balise p

Ces bouts de codes sont entourés d’une « DIV »

Dans le cas d’un tutoriel où l’on souhaite proposer à nos lecteurs des bouts de codes à copier/coller, il est souhaitable d’afficher le code tel qu’il est.

Une capture d’écran ou une image ne permettra pas de copier le code et oblige l’utilisateur à recopier ce code et un fichier joint en HTML ou PHP, ce qui oblige à télécharger un fichier, l’ouvrir et copier/coller le code ; ce qui nous l’avouerons n’est pas très pratique.

L’astuce

Voici une astuce qui vous permet d’afficher votre code source au sein d’un article :

Avant de saisir les lignes de code sur votre éditeur en ligne, copier-coller celle-ci dans un éditeur de texte et remplacer les chevrons < et > par leur équivalent HTML, via la fonction chercher/remplcer :

remplacer le chevron > par <
remplacer le chevron > par >

Exemple :



<div id="bloc" class="info">

<h1>Du code</h1>

<p>Voici une astuce pour affichier votre code en ligne</p>

<p>Ils suffit simplement de remplacer les chevrons</p>

</div>

Insérez ce bout de code entre les balises <code> et </code>.
Ceci permet ainsi de respecter la sémantique en indiquant qu’il s’agit de code et permettra de plus d’ajouter du style.

Par exemple un fond de couleur et du texte blanc, comme ceci :