Lorsque vous partagez du code sur votre blog ou votre site web, il est essentiel de le présenter de manière lisible et compréhensible. C'est là qu'intervient highlight.js, une bibliothèque JavaScript qui rend la mise en surbrillance syntaxique simple et élégante. Dans cet article, nous allons explorer comment utiliser Highlight.js pour améliorer la présentation de votre code.
Highlight.js est une bibliothèque open-source qui permet de mettre en surbrillance la syntaxe de code sur une page web. Elle prend en charge une variété de langages de programmation, offrant ainsi une solution polyvalente pour tous les développeurs.
1. Inclure la Bibliothèque : La première étape consiste à intégrer Highlight.js dans votre projet. Vous pouvez le faire en ajoutant les liens vers la bibliothèque CSS pour le style et le fichier JavaScript pour le fonctionnement. Utilisez les liens CDN pour une intégration rapide :
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@10.7.1/styles/default.min.css">
<script src="https://cdn.jsdelivr.net/npm/highlight.js@10.7.1/lib/highlight.min.js"></script>
2. Initialiser Highlight.js : Pour activer Highlight.js sur votre page, appelez hljs.initHighlightingOnLoad(); dans une balise <script> :
<script>
// Initialiser highlight.js
hljs.initHighlightingOnLoad();
</script>
3. Marquer Votre Code HTML : Encadrez votre code dans une balise <pre> (pour la mise en forme) et une balise <code> avec la classe hljs pour la mise en surbrillance. Spécifiez également le langage du code avec la classe appropriée (par exemple, html, javascript, python, etc.) :
<pre><code class="html">
<!-- Votre code HTML ici -->
</code></pre>
Attention votre code doit être échappé pour cela allez sur le site Freeformatter.
4. Personnaliser le Style (Optionnel) : Vous avez la possibilité de personnaliser le style en utilisant différents thèmes. Ajoutez la classe du thème à la balise <code> parente. Par exemple, pour le thème Darcula :
<pre><code class="html darcula">
<!-- Votre code HTML ici -->
</code></pre>
Avec Highlight.js, la mise en surbrillance syntaxique devient un jeu d'enfant. Cette bibliothèque offre une solution rapide et élégante pour améliorer la lisibilité de votre code sur le web. En suivant ces étapes simples, vous pouvez rendre vos articles de blog et pages web plus conviviaux pour les développeurs. Ajoutez une touche professionnelle à votre contenu en adoptant Highlight.js dès aujourd'hui !