Bien entendu, différents outils existent (ex : GeSHi(PHP), SyntaxHighlighter (JavaScript), Pygments (Python)), avec une mise en œuvre plus ou moins lourde. Je vous propose ici un tutoriel pour découvrir l’outil Prism qui reste très simple d’utilisation, avec toutefois un paramétrage possible assez complet.

Présentation rapide

Prism est donc un outil [1] permettant de présenter du code pour de nombreux langages en proposant plusieurs thèmes de coloration syntaxique pour chaque langage.

Quelques options complémentaires sont accessibles comme la numérotation des lignes ou la possibilité de copier directement le code en un clic.

Fonctionnement

L’utilisation de Prism nécessite de télécharger un fichier prism.js et un fichier prism.css depuis l’espace de téléchargement du site Prism.

Ensuite, il suffit de faire un lien vers le fichier prism.css dans l’en-tête des fichiers *.html qui nécessitent l’utilisation de l’outil.

<_link rel="stylesheet" href="chemin_vers/prism.css" />

Remarque [2] [3]

Il faut également placer un lien vers le fichier prism.js dans les fichiers *.html.

<script src="chemin_vers/prism.js"></script>

Le code que l’on désire colorer doit alors être présenté entre les balises <pre> et <code> associé à la classe du langage à colorer sous la forme suivante :

<pre><code class="language-html"> Taper ici votre code </code></pre>

Les classes de langages sont par exemple :

• language-html
• language-css
• language-js
• language-python

Paramétrage

Sur la page de téléchargement, on peut choisir plusieurs options :

• Niveau de compression des fichiers :
  • Development version : télécharge un fichier facilement lisible et compréhensible, mais prend plus de place que la version Minified. Utile pour comprendre le fonctionnement de l’outil.
  • Minified version : télécharge les mêmes fichiers, mais tout le texte est compacté et donc presqu’illisible, mais ça prend moins de place mémoire. C’est la version à préférer pour l’utilisation de son site, une fois qu’on est bien certain de ses choix.

• Choix du Thème de coloration : à choisir en fonction de ses goûts ! Pour faire des tests, voir les exemples proposés sur cette page, en choisissant les thèmes proposés (il faut cliquer dans les "ronds" imbriqués les uns dans les autres en haut à droite).
  Il est possible ensuite de modifier un thème "à la main" en écrivant directement dans le fichier prism.css téléchargé.

• Choix des Langages : plus on choisit de langages pour la coloration, plus le fichier à télécharger grossit, mais de toute façon, la taille reste très raisonnable. On peut aussi bien entendu télécharger différentes versions en fonction des utilisations que l’on souhaite en faire.

• Choix des Plugins : Les plugins sont des additifs qui permettent d’avoir des fonctionnalités supplémentaires.
  Voici ceux que j’aime bien :
  • Line Numbers : Pour numéroter les lignes. L’utilisation basique se fait ainsi : <pre class="line-numbers">
  • Autolinker : Les liens du code sont actifs dans la page html générée.
  • File Higlight : Pour insérer directement un fichier annexe à colorer.
    L’utilisation basique se fait ainsi : <pre data-src="adresse_du_fichier">.
    Le langage utilisé est détecté automatiquement par l’extension du fichier.
    Couplé au plugin Toolbar, on peut ajouter un lien de téléchargement ainsi :
    <pre data-src="adresse_du_fichier" data-download-link-label="Télécharger">
  • Show Language : Signale le langage du code présenté.
  • Previewers : Permet de présenter au passage de la souris les valeurs des couleurs, angles, durées, etc. qui pourraient être définies dans le code.
  • Keep Markup : Permet de conserver le balisage avec <mark> qu’on pourrait avoir ajouté dans le code à présenter.
  • Command line : Permet de présenter du code comme en ligne de commande. Voir l’utilisation spécifique directement ici.
  • Normalize Whitespace : Permet d’enlever tous les "blancs" que le code possède en excès. Voir l’utilisation spécifique directement ici pour adapter le comportement fin de ce plugin.
  • Toolbar : Permet de proposer un "menu" à l’utilisateur avec des fonctionnalités spécifiques. Indispensable par exemple pour le plugin Show Language ou Copy to Clipboard. Voir l’utilisation spécifique directement ici pour des compléments.
  • Copy to Clipboard Button : Ajoute un bouton pour copier le code dans le presse-papier.

Zone de tests

Depuis cette page, vous pouvez tester les différents thèmes pour différents langages et voir le résultat obtenu. Très pratique !