En tant que développeur, j'ai envie que le code que je présente dans mes articles soit aussi lisible que dans mon IDE. Je utilise la plateforme de blog Ghost, voici donc comment intégrer la coloration syntaxique dans Ghost.

L'éditeur visuel de Ghost nous propose différents types de bloc pour construire nos articles, mais il ne propose pas directement un bloc permettant d'afficher du code ; il faut passer par le bloc Markdown en utilisant la syntaxe avec les trois backticks (```).

Le rendu dépendra du thème, mais voici un screenshot d'un bloc de JavaScript avec le thème de ce blog.

C'est propre, mais la coloration syntaxique n'est pas au niveau d'un IDE.

J'ai trouvé cet article sur le site de Ghost qui propose d'intégrer la librairie PrismJS. L'article propose deux façons de faire, la première en passant par l'injection de code accessible depuis l'interface d'administration de Ghost, la seconde en modifiant directement le thème.

Pour des raisons de simplicité, j'ai choisi l'injection de code.

Je connais deux librairies qui permettent de faire du coloration syntaxique : PrismJS et HighlightJS. Les deux projets sont matures et complets, avec plusieurs thèmes disponibles, un système de plugins et des centaines de langages supportés. HighlightJS semble cependant plus actif, la dernière release datant d'octobre 2023 contre août 2002 pour PrismJS.

Intégration via l'injection de code

L'injection de code est disponible dans le rubrique "Avancée" des paramètres de Ghost. L'écran nous permet d'injecter du code dans le header et dans le footer du site.

Voici le code à ajouter dans le header :

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>

Et le code à ajouter dans le footer :

<script>
hljs.highlightAll();
</script>

Ici, j'utilise une configuration de base qui laisse à HighlightJS le soin de détecter les blocs de code ainsi que les langages.

Le choix du thème se fait en injectant la CSS correspondante, ici atom-one-dark ; vous trouverez tous les thèmes disponibles sur la page de démo.

Pour plus de détails sur le fonctionnement de la librairie, il y a cet article ou la documentation.

En résumé, nous avons vu comment intégrer la coloration syntaxique dans Ghost en utilisant la librairie HighlightJS. En injectant le code de HighlightJS dans le header et le footer de notre site, nous pouvons rendre nos blocs de code plus lisible et agréable à lire. Grâce à cette méthode, nous pouvons offrir une expérience utilisateur plus riche et plus professionnelle pour les développeurs et les techniciens qui visitent notre blog.