Wordpress vous propose d’indiquer à vos lecteurs qu’une partie du contenu d’un article est du code en choisissant le format « pré-formaté » parmi les autres formats existants (paragraphe, adresse, titre 1-2-3-4-5 & 6) au moment de la rédaction. Voici un petit morceau de code qui permet de mettre en forme l’affichage de ce type de contenu.

Dans votre CSS

Modifiez « pre » & « code » selon ce que vous souhaitez.

pre, code {
 background: url("images/fond-code-pre.png") repeat scroll 0% 0% transparent;
 font: 14px/19px 'cabin','lucida console',monospace;
 display: block;
 overflow-x: visible;
 overflow-y: hidden;
 padding: 3px;
 margin: 20px;
 color: #B52A17;
 border-width: 1px;
 border-style: solid;
 border-color: #f0f0f0;
 }

Dans le dossier « images » de votre template

Ou n’importe où ailleurs sur votre blog, envoyez l’image de fond à télécharger ci-dessous. N’oubliez pas de changer l’adresse url dans le code pour que celle-ci corresponde à l’emplacement de l’image dans le site.

 Télécharger l’image « fond-code-pre.png » (clic droit, « enregistrer la cible du lien sous »)

Photographie de Infocux Technologies (CC BY-NC 2.0)