Coloration syntaxique avec Prism (JS + CSS) Presenter du code dans ses pages HTML

Enseignant l’informatique, vous pouvez être amené à présenter du code (html, python, java, etc) sur un site Web, et le cas échéant, disposer d’un outil simple pour présenter « de façon jolie » ce code est bien utile.

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.

  1. <_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.

  1. <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 :

  1. <pre><code class="language-html">
  2. Taper ici votre code
  3. </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 !

Voir en ligne : Prism : site officiel

Notes

[1Prism est libre (licence MIT) et son code est sur Github
Cet outil est nommé PrismJS pour ne pas le confondre avec un autre projet Prism.

[2Sur ce site, rédigé avec Spip, un autre outil de présentation de code est utilisé : il s’agit du plugin « Coloration code » basé sur Geshi. Et cet outil interdit certaines balises html — comme ici link — c’est la raison du underscore placé devant link (vous l’aviez remarqué, n’est-ce pas ?)

[3C’est un réglage plus général sur le site qui bloque ces lignes de codes : j’ai demandé à ce que ces restrictions soient levées...

Partager

Imprimer cette page (impression du contenu de la page)