Ajouter la coloration syntaxique sur son blog

Nouveau billet rapide, peut-être que certains (le peu ^^) qui lisent ce blog tiennent un blog eux-mêmes ou envisage d'en tenir un, et si cela concerne la programmation, la coloration syntaxique est assez importante pour pouvoir lire correctement le code.

Je vais parler d'une librairie très connue, mais il suffit d'injecter highlight.js dans votre template. Il suffit d'aller sur cdnjs et de copier les tag de scripts que vous souhaitez, par exemple dans mon cas cela donne pour la partie js :

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js" integrity="sha512-gU7kztaQEl7SHJyraPfZLQCNnrKdaQi5ndOyt4L4UPL/FHDd/uB9Je6KDARIqwnNNE27hnqoWLBq+Kpe4iHfeQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/languages/yaml.min.js" integrity="sha512-JECvnCr1PzrRXA/j7F3luQKYo4iJi1S1fW5JUtr0GrrjK7L/aN3IReNx7bGYq4UiLHJoz5EpLitfjH8UyImq0Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/languages/twig.min.js" integrity="sha512-Nh17fm73fV9hIdxoBj1wcb1VoCu2Lf0RbLDryNGY2JBf46pK2L27B2RIRhSzmiPKK2yaUzNp8U624oSbb2O7vQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/languages/php.min.js" integrity="sha512-/3+V7ZkxAwWeMGZxQAkRO+HUMTVpeGQPDMpGdFya68jEd/2xIGmhjh1pPE1Z463LEBzxH4J84hoe6+kOQHE7MQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/languages/javascript.min.js" integrity="sha512-5jXgs935s5HbqrOPf7Jl2CuGOdTqY/I6YtN++ucHs4qWjfG95AJMezR8TbTgKX/SiB8Mr+rubck6GRY6MspbKg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/languages/json.min.js" integrity="sha512-nQCa7GcNl4QHBjXtYDFUh60Kl1Ij0Rri2czcHNn0nrDXQzQNdUuLsMQu7XGEI6HO2L+EL9s+dJ8flwn2ITQwvA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/languages/go.min.js" integrity="sha512-6m7H6Bk2KM24+q+jB5KGHNS/qjz2+9E3DCJiDPHRUzqkMT6myjxX6ZG3poLVNIBn31lPhufOZcLHfYwsl53aHQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/languages/bash.min.js" integrity="sha512-FWlcW5zSwKZtFwpRaPgHX5inFYAnkoIlYjt2Oe/KRsA9A8RzKBnNzOQcsmnC478iKS2HGp16k7oN2A/+qOu1sQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

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

L'ordre est important, d'abord la librairie principale, puis les langues, puis exécuter la coloration syntaxique

Et pour la partie css :

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/default.min.css" integrity="sha512-hasIneQUHlh06VNBe7f6ZcHmeRTLIaQWFd43YriJ0UND19bvYRauxthDg8E4eVNPm9bRUhr5JGeqH7FRFXQu5g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/atom-one-dark.min.css" integrity="sha512-Jk4AqjWsdSzSWCSuQTfYRIF84Rq/eV0G2+tu07byYwHcbTGfdmLrHjUSwvzp5HvbiqK4ibmNwdcG49Y5RGYPTg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Et maintenant le code ajouter dans des blockquote (et avec la bonne langue indiqué) sera coloré automatiquement en fonction du code ajouté.

Dans le cas d'éditeur markdown, il faudra le faire via le système des triples quotes :

```js
// mon code js
```

Enjoy !