Howto : Prism pour la coloration syntaxique

howto

Pour mon premier article, j’ai voulu mettre en place une coloration syntaxique pour rendre plus lisibles les extraits de code.

Deux pistes :

J’ai choisi Prism qui m’a semblé beaucoup plus simple à mettre en place. Les fichiers JS et CSS sont très légers si vous limitez les langages et les plugins.

J’ai sélectionné le thème Tomorrow Night qui propose des couleurs suffisamment contrastées (niveau double A) tout en étant, de mon point de vue, le plus lisible.

J’ai rajouté Bash + Shell, Git, Stylus et YAML pour les langages en plus de ce qui est présélectionné et
Highlight Keywords en plugin. À l’usage, je retirerai ou ajouterai ce qui me semble nécessaire.

Il y a deux fichiers à télécharger : prism.js et prism.css.

J’ai rangé le tout dans le dossier assets dans les sous-dossiers qui vont bien : css et js.

Je n’appelle ces fichiers que dans le <head> du template qui gère les notes pour ne pas l’embarquer là où c’est inutile.

<?= css(['assets/css/prism.css', '@auto']) ?>
<?= js('assets/js/prism.js') ?>

J’utilise ici les helpers de Kirby. Je dois dire que pour moi qui m’emmêle parfois encore les pinceaux avec les URL relatives et absolues, c’est confondant de simplicité.

Et c’est fini !