Appliquez de la coloration syntaxique avec highlight.js
Publié le 17 décembre 2022
Introduction
La librairie highlight.js est une bibliothèque JavaScript open source qui permet de mettre en surbrillance du code dans les pages web. Elle prend en charge un grand nombre de langages de programmation et est facile à utiliser.
Vous désirez appliquer une coloration syntaxique de vos extraits de code sur vos pages ? Ce tutoriel sur highlight.js est fait pour vous.
J'utilise moi-même cette librairie pour mes articles, et je ne peux que vous la recommander ! 🎨
Dans ce guide nous verrons :
- L'utilisation globale de la librairie.
- L'optimisation des ressources impliquées.
- Comment intégrer le plugin hljs-line-numbers qui permet d'afficher les numéros de ligne.
Installation
CDN
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
Npm
npm install highlight.js
Utilisation
Tout d'abord il nous faut importer la librairie si vous utilisez npm. Highlight.js est aussi disponible en ES6 Module.
ES6 Module
import hljs from 'highlight.js';
CommonJS
const hljs = require( 'highlight.js' );
La méthode .highlightAll() va permettre d'effectuer les modifications nécessaires sur les éléments du DOM pour pouvoir appliquer la coloration syntaxique.
hljs.highlightAll();
Pour appliquer la coloration syntaxique sur un extrait de code, il suffit d'entourer ce dernier des balises pre et code, et de rajouter les classes hljs et language-<Nom du langage>. Voici un exemple :
<pre><code class="hljs language-javascript">
function add(a, b) {
return a + b;
}
const sum = add(1, 2);
</code></pre>
Et hop, nous voici avec un joli extrait de code en couleur !
function add(a, b) {
return a + b;
}
const sum = add(1, 2);
Si vous utilisez l'éditeur WYSIWYG CKEditor et que vous souhaitez y intégrer un builder de code snippet (plugin) compatible avec highlight.js à votre barre d'outil, je vous montre comment faire dans cet article.
Changer de thème
CDN
Si vous souhaitez changer de thème (style de coloration syntaxique), changez le fichier CSS chargé depuis le CDN par celui que vous voulez. Vous pouvez retrouver la liste de tous les thèmes disponibles sur CDNJS.
Pour ce blog, j'utilise le thème codepen-embed !
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/codepen-embed.min.css" />
SCSS
/* Depuis un CDN */
@import "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/codepen-embed.min.css";
/* Pour importer depuis node_modules */
@import "~highlight.js/scss/codepen-embed";
Optimisation des performances
Voyons quelques optimisations que nous pouvons appliquer à ce que nous avons vu précédemment.
Différer le chargement
La librairie est assez lourde quand importée entièrement (nous verrons juste après comment l'alléger), elle met du temps à être récupérée et est bloquante quand elle est chargée de façon synchrone, optimisons ce chargement en y appliquant l'attribut defer de la façon suivante :
<head>
<!-- ... -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js" defer></script>
</head>
<body>
<!-- ... -->
<script>
window.addEventListener("load", () => {
hljs.highlightAll();
})
</script>
</body>
Avec defer, le chargement de la librairie se fait en parallèle sans stopper le rendu du reste de la page. Il faut alors faire attention à utiliser l'instance hljs seulement après que le rendu de la page soit terminé en écoutant l'évènement load.
Importer le strict nécessaire
Charger la librairie highlight.js entièrement représente un cout non négligeable en performances. Nous avons vu comment importer la librairie de façon globale, voyons maintenant comment importer seulement ce dont nous avons besoin, soit langage par langage.
CommonJS
// Récupération du core
const hljs = require( 'highlight.js/lib/core' );
// Enregistrement des langages souhaités
hljs.registerLanguage( 'scss', require( 'highlight.js/lib/languages/scss' ) );
hljs.registerLanguage( 'javascript', require( 'highlight.js/lib/languages/javascript' ) );
ES6 Module
// Récupération du core
import hljs from 'highlight.js/lib/core';
// Récupération des langages souhaités
import scss from 'highlight.js/lib/languages/scss';
import javascript from 'highlight.js/lib/languages/javascript';
// Enregistrement des langages souhaités
hljs.registerLanguage('scss', scss);
hljs.registerLanguage('javascript', javascript);
Ajouter les numéros de ligne
Malheureusement pour nous, la colonne avec les numéros de ligne n'est pas incluse de base dans la librairie, une volonté de l'auteur de la librairie qui explique le comment du pourquoi ici.
Mais bonne nouvelle : Cet utilisateur s'est porté volontaire pour créer un plugin qui fait le boulot et il est très simple à installer et intégrer. Une ligne de commande, un petit ajout de Javascript et quelques lignes CSS feront l'affaire ! 🥳
Suivez le guide.
Installation
CDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/highlightjs-line-numbers.js@2.8.0/dist/highlightjs-line-numbers.min.js"></script>
Npm
npm install highlightjs-line-numbers.js
Utilisation
Il suffit simplement d'importer highlightjs-line-numbers.js et d'appeler la méthode .initLineNumbersOnLoad() après notre configuration highlight.js :
require('highlight.js');
require('highlightjs-line-numbers.js');
hljs.highlightAll();
hljs.initLineNumbersOnLoad();
Enfin on ajoute un peu de CSS pour obtenir un beau résultat :
.hljs-ln-numbers {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
color: #ccc;
border-right: 1px solid rgba(204, 204, 204, 0.514);
vertical-align: top;
word-break: normal; /* Évite un retour à la ligne sur les grands numéros de ligne */
}
.hljs-ln td:nth-child(1) {
padding-right: 10px;
}
.hljs-ln td:nth-child(2) {
padding-left: 10px;
}
0 commentaire