Ajouter la coloration syntaxique dans vos billets

Si comme moi vous écrivez régulièrement des billets techniques comportant des extraits de codes ou autres joyeusetés, il peut-être très utile d'ajouter la coloration syntaxique afin de faciliter la lecture du dit code.

Voici ici comment procéder dans Ghost.

Nous allons utiliser Prism pour cela. Il s'agit d'un module permettant la coloration. Son intégration dans Ghost est relativement simple.

On se rend sur le site https://cdnjs.com/libraries/prism afin de trouver la dernière version disponible. On sélectionne ensuite la feuille de style souhaitée.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/themes/prism.min.css" integrity="sha512-tN7Ec6zAFaVSG3TpNAKtk4DOHNpSwKHxxrsiw4GHKESGPs5njn/0sMCUMl2svV4wo4BK/rCP7juYz+zx+l6oeQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Puis le code javascript correspondant :

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/prism.min.js" integrity="sha512-RDQSW3KoqJMiX0L/UBgwBmH1EmRYp8LBOiLaA8rBHIy+7OGP/7Gxg8vbt8wG4ZYd29P0Fnoq6+LOytCqx3cyoQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Pour ajouter la coloration du code bash on ajoute le lien correspondant:

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/components/prism-bash.min.js" integrity="sha512-ZqfG//sXQwAA7DOArFJyMmZQ3knKe+0ft3tPQZPvDPJR04IatmhVO5pTazVV+fLVDYSy28PhoBeUj5wxGRiGAA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Ces liens sont à coller dans la zone d'administration de votre blog dans la section injection de code.

Liens connexes :

https://ghost.org/docs/tutorials/code-syntax-highlighting/