Avant de commencer, nous allons d’abord télécharger Google Code Prettify

Après que nous ayons dézippé l’archive, nous allons nous interessé essentiellement au dossier src, il contient les fichiers prettify.css et prettify.js que nous allons importer dans notre page web.

<link href="prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="prettify.js"></script>

Maintenant à la fin du document, avant la balise fermante body, on exécute la fonction javascript prettyPrint() qui vas lancer le script de coloriation sur le code, comme ceci :

<script>
  prettyPrint();
</script>

Ensuite, il ne nous reste plus qu’as tappez le code que l’on veut entre la balise pre muni de la classe prettyprint

<pre class="prettyprint">
/*Test de Coloriation CSS*/
.titre{
    text-align: center;
    color: #333;
}
</pre>

Le résultat est le suivant :

Par defaut, le langage est detecté automatiquement, mais vous pouvez forcer à utiliser la coloriation d’un langage particulier en ajouttant une autre class lang-[le_langage_choisis] (ex: lang-css), ce qui donnerais ça:

<pre class="prettyprint lang-css">
/*Test de Coloriation CSS*/
.titre{
    text-align: center;
    color: #333;
}</pre>

Vous pouvez aussi ajouter les numéros de lignes pour le code en ajouttant la class linenums:[numero_première_ligne] (ex: class= »prettyprint lang-css linenums:10″)
ceci rajoutera les numéros des lignes en commançant par 10

Choisir un Theme Pour Google Code Prettify

Vous pouvez télécharger des thèmes de coloriations puis facilement les installer en l’uploadant puis en remplaçant juste le lien vers prettify.css avec celui de votre theme.

sinon, vous pouvez aussi créer le vôtre en vous basant sur le theme par defaut par exemple. Vous n’aurez qu’as ouvrir le fichier prettify.css puis changer une à une les couleurs et styles de chaque élément de code.