Si vous avez un blog ou un portfolio sur lequel vous souhaitez présenter des codes, que ce soit des extraits de code HTML / JavaScript ou encore CSS, vous avez très certainement dû vous confronter à un problème : comment activer la coloration syntaxique pour faire comme si nous avions mis le code dans un éditeur de code ? Voyons dans cet article comment faire ensemble.
1ère étape
Le code HTML.
<pre>
<code class="css">
.search-input {
box-shadow: 0px 1px 4px rgba(0,0,0,.15);
/* Ceci est un commentaire */
font-size: 1rem;
width: 100%;
}
</code>
</pre>
2ème étape
Ajoutons la feuille de style de highlight.js.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.2.0/styles/atom-one-dark.min.css” />
Pour ajouter de la coloration à notre code, nous allons utiliser une librairie déjà toute faite : highlight.js.
Pour l’utiliser nous devons inclure sa feuille de style (entre les balises head) et sa librairie JavaScript (dans la prochaine étape).
3ème étape
Ajoutons maintenant la librairie JavaScript.
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.2.0/highlight.min.js"></script>
<script>
hljs.initHighlightingOnLoad();
</script>La fonction initHighlightingOnLoad() va aller détecter les balises <code></code> et va récupérer la classe sur cette dernière pour choisir la coloration syntaxique à appliquer.
4ème étape
Stylisons pour finir la classe créé par highlight.js.
.hljs {
padding: 0.6rem 2rem;
background: black;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 5px;
transition: all 0.2s;
}
.hljs:hover {
border-color: #ff4754;
}Dans cette étape nous stylisons la classe hljs alors même que nous n’avons créé cette classe.
Celle-ci est en réalité créée automatiquement par Highlight.js au moment où il détecte une balise <code></code>.
Nous ne faisons que profiter de cette classe générée automatiquement pour styliser l’ensemble du bloc dans lequel nous mettons notre code à colorer.
