Le CSS associé à la balise HTML pre

Si vous avez un blog parlant de développement ou de code, vous utilisez certainement la balise html pre, qui permet de créer un texte dit pré-formaté. Cette balise va permettre de mettre du code en exemple, pour illustrer une technique ou une fonction liée au code. Evidemment, cette balise ne se limite pas au HTML et au CSS, vous pourrez l'utiliser pour n'importe quel langage de programmation, qu'il soit de technologie web ou non.

Balise HTML pre ? code ? ou les deux ?

La balise pre signifie littéralement "texte pré-formaté", sans dire autre chose sur le texte à l'intérieur de cette balise. La balise code, quant à elle, signifie que le texte à l'intérieur de cette balise sera un extrait de code. Cela tombe sous le sens, sémantiquement la balise code semble donc plus appropriée pour l'affichage d'un extrait de code, peu importe le language utilisé.

Mais pour une bonne pratique HTML/CSS, il est recommandé d'utiliser la balise code à l'intérieur de la balise pre. D'un point de vue sémantique, cela permet aux moteurs de recherche de comprendre que ce texte est un contenu pré-formaté et qu'il s'agit d'un code/langage de programmation. Et c'est logique : un extrait de code est bien un texte pré-formaté. Il faut donc mettre d'abord la balise pre, puis à l'intérieur la balise code.

<pre><code>Texte à insérer</code></pre>

Quelle typo utiliser pour la balise pre ?

De manière générale, la typo utilisée pour codé est de la famille des "monospace" (pas le modèle de voiture hein!). Dans les types de typos possibles, les 2 grandes familles sont avec serif ou sans serif, qui signifie avec empattement (comme le Times New Roman), ou sans empattement (Comme l'Arial). La différence entre ces 2 familles sont l'aspect angulaire/droit des barres qui composent chaque caractère. Avec la lettre L par exemple, si la typo n'est faite qu'avec 2 droites, c'est une typo sans empattement, alors qu'avec empattement le haut du L ainsi que l'extrémité droite (la droite horizontale) auraient de petites queues. C'est ce que l'on appelle l'empattement.

En plus de ces familles traditionnelles, il en existe beaucoup d'autre, et notamment la famille "monospace" qui nous concerne ici. La particularité de cette famille est que tous les caractères prennent la même largeur, aussi bien une majuscule comme le Z que le i ou le point (.). L'avantage est pour la lecture du code qui est alors grandement facilité.

Dans un article de 2009 écrit par Mickael Tuck, il est expliqué comment utiliser les familles de polices en CSS et explique comment bien préparer un groupe de typos pour l'utilisation web. Voici un exemple donné sur l'utilisation des familles "monospace" :

font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;

Bien évidemment, vous pouvez réadapter cette famille de polices en fonction de vos besoins ou contraintes. L'utilisation de Google Font peut être également un atout.

Retour à la ligne ou non ?

C'est plus une préférence personnelle, mais moi personnellement je laisse tout sur la même ligne, et je bloque mes éditeurs de code (TextMate, TextWrangler, NotePad++, etc...) pour qu'ils ne fassent pas de retour à la ligne en cas de dépassement de fenêtre. Du coup j'ai un scroll horizontal mais cela me permet de m'y retrouver plus facilement. Mais cela reste du confort visuel et un choix purement personnel.

Lorsque vous utilisez la balise pre, vous allez pouvoir également définir ce paramétrage en CSS :

pre {
white-space:pre-wrap;
}

En refusant le retour à la ligne (donc de risquer le dépassement du bloc en largeur) il vous faudra préciser au navigateur d'ajouter un scroll automatique sur l'axe des x (en mode horizontal je le précise) avec l'instruction suivante :

overflow-x:auto;

Un ascenceur viendra se positionner en bas du bloc pre et s'affichera si le code dépasse en largeur. Facile pour l'instant non ?

A l'inverse, si vous souhaitez que le bloc s'adapte en largeur à votre contenu, il faudra remplacer l'instruction précédente par :

width:min-content;

Cette instruction indique que la largeur (width) prendra comme valeur la largeur minimale du contenu. Bien sur, vous pouvez jouer avec les pseudo-classes CSS hover et focus par exemple pour l'ouvrir complètement lorsque vous cliquez dessus ou si vous survoler ce bloc, en passant par ceci :

pre:hover, pre:focus {  width: min-content;}


La coloration syntaxique

Malheureusement, le HTML et le CSS ne permettent pas l'ajout de couleurs pour chaque terme en fonction de l'utilisation (variable, fonction, instruction, objet, ...). Si vous souhaitez rajouter de la couleur à votre code, vous pouvez utiliser le javascript et notamment Prism.js qui permet une colorisation synthaxique avec l'utilisation de thèmes. Prism.js est léger, n'est pas dépendant d'une librairie (comme MooTools ou jQuery) et est personnalisable très facilement. 

Les tabulations

Pour gérer les tabulations, qui vont vous permettre d'aérer votre code, l'instruction CSS est la suivante :

pre {
tab-width: 4;
}


Et comme vous l'aurez compris, en utilisant du monospace en CSS, la valeur de l'attribut tab-width est l'écart en nombre de caractères par rapport à la position verticale d'origine. C'est simple ! (en faisant référence à une fameuse marque de voiture là pour le coup).

Les autres options

La balise pre fonctionne après comme le reste des balises, on peut y ajouter un fond, des bordures, des espaces intérieurs (padding) et des espaces extérieurs (margin) - mais ça vous le saviez déjà ! Pour ma part, sur ce blog, j'ai personnalisé les balises pre et code avec un display block pour qu'ils prennent toute la largeur, avec une couleur de fond et une couleur de typo, comme ceci :

code {
display: block;
padding: 12px;
color: #F60;
background:#f5f5f5;
}

Personnellement, je n'utilise pas (encore ?) la coloration synthaxique pour le code, puisque j'en utilise qu'un petit peu dans mes articles. Mais si un jour je dois faire des articles plus complets avec des extraits plus importants, je n'hésiterai pas à utiliser Prism.js ou un autre script de coloration.

J'espère que cet article vous aidera dans l'utilisation des CSS et du HTML pour la balise pre.

Cet article est une version traduite et allégée de l'excellent article de Chris Coyier sur MediaTemple.net