Afficher du code source dans un article sur le Web

Du code source afficher en ligne

Lorsque nous nous souhaitons afficher un code source dans un article, celui-ci est traité comme du code HTML et affiche le code intéprété par l'écran, c'est notament le cas pour le CMS Wordpress.
Exemple :

Mon code afficher est dans une balise p

Ici aussi dans une autre balise p

Ces bouts de codes sont entourés d'une DIV avec un identifiant et une class

Dans le cas d'un tutoriel où l'on souhaite porposer à nos lecteurs des bouts de codes à copier/coller, il est souhaitable d'afficher le code tel q'uil est. Une caputre d'écran ou une image ne permettra pas de copier le code est oblige l'utilisateur à recopier ce code et un fichier joint en html ou php, l'obligra à télécharger un fichier, l'ouvrir et copier/coller le code ; ce qui nous l'avourons n'est pas très partique.

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, les copier-coller dans un éditeur de texte et remplacer les sigles par leur équivalent HTML :

remplacer < par <
remplacer > par >
Exemple :

Insérez ce bout de code entre les balises <code>...</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 :

Notez que pour le CMS SPIP, pour afficher du code source, il suffira simplement d'entourer le code par les balises :

Ressources

Le site de Freebits propose un outil en ligne open source qui se charge de transformer les caractères : Convertir son code HTML en code Text