[JS] Prism, une alternative à SyntaxHighlighter

En guise d’alternative au très bon SyntaxHighlighter développé par Alex Gorbatchev (voir le site ici) mais qui n’est malheureusement plus mis à jour, on peut utiliser Prism.js.

Il offre la coloration syntaxique pour afficher du code de manière à ce qu’il soit lisible par les utilisateurs. Il se veut intuitif et extensible car il est possible d’ajouter assez facilement des langages à ceux déjà pris en charge. On peut même basculer entre différents thèmes. La librairie est utilisée par de nombreux sites tels que React ou même Drupal.

Pour l’utiliser sur Blogger comme c’est mon cas, il faut importer les scripts et styles de base. Et pour cela il faut modifier le thème du blog. Depuis le tableau de bord de votre blog choisissez Thème puis cliquez sur Modifier le code HTML.

Juste avant l’élément fermant head du thème, il faut inclure les feuilles de style.

<link href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/themes/prism.css' rel='stylesheet'/>
<link href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/plugins/line-numbers/prism-line-numbers.css' rel='stylesheet'/>

De même qu’il faut inclure le script et l’autoloader avant la fermeture de l’élément body. On y ajoute aussi les différents plugins que l’on veut utiliser. Les éléments obligatoires sont prism-core et prism-autoloader.

<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/components/prism-core.min.js'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/plugins/autoloader/prism-autoloader.min.js'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/plugins/line-numbers/prism-line-numbers.min.js'/>

Ensuite on peut commencer à utiliser les blocs de code. Il faut utiliser les balises pre et code. La seconde prendra une classe qui sera le langage du code que l’on veut formater. La liste complète est disponible sur le site officiel. La classe peut être language-* ou lang-*, l’astérisque étant remplacée par le bon code pioché dans la liste.

<pre>
<code class="lang-html">
<!-- Code qu'on veut formater -->
</code>
</pre>

Il faut faire attention car il faut échapper les caractères du code à formater, sinon il sera évidemment interprété (très important donc si on veut afficher du HTML au lecteur).

Pour éviter de le faire à la main utilisez plutôt l’outil en ligne Quick Escape Tool.Petit truc supplémentaire avant de nous quitter : afin d’utiliser le plugin line-numbers (destiné à afficher les numéros de ligne) que nous avons importé dans le second exemple ci-dessus, il vous suffira d’ajouter la classe « line-numbers » à l’élément ouvrant pre. N’hésitez pas à consulter le site officiel : vous y découvrirez de nombreux plugins ainsi que des tutoriels.

Bon développement !

Prismjs.com

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *