highlight.js, comment mettre en avant votre code

La couleur dans codeblock !

Ceci est la suite de codeblock pour SULU et il est temps de jeter un œil à highlight.js. Car oui, la couleur n'est pas propre à CKEditor ! Pour rendre cela plus plaisant à la lecture nous devons passer par un autre package.

npm install highlight.js 
# or 
yarn add highlight.js

Notez toutefois que vous n'êtes pas obligé de passer par npm ou yarn pour récupérer highlight.js. Highlight permet de passer par un CDNJS pour récupérer rapidement les scripts pour faire tourner les styles que vous allez récupérer.

<!-- script pour appeler highlight.js  -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark-reasonable.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/go.min.js"></script>
<script>hljs.highlightAll();</script>
<!-- fin des scripts pour appeler highlight.js  -->

Placez ces quelques lignes dans votre fichier html et vous aurez la possibilité de lancer rapidement une version colorée qui fonctionne avec CKEditor. Laissez-moi vous expliquer rapidement ce que chaque ligne fait.

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

Très simple, vous appelez le styles.css atom-one-dark-reasonable.min.css, qui est bien sûr un des noms de style que highlight.js propose mais sachez que vous en avez bien d'autres qui peuvent être utilisés. Vous pourrez les trouver sur le site de démo et les essayer à votre guise.
https://highlightjs.org/demo

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>

Ce script récupère la logique derrière le fonctionnement de highlight.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/go.min.js"></script>

Et celui-ci récupère spécifiquement un langage dans le cas où vous souhaiteriez travailler avec un seul langage uniquement sur votre application/site.

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/{votre-langage}.min.js"></script>

Et ainsi si vous avez placé ce code dans le head vous avez maintenant plus qu'à y ajouter.

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

Ce petit bout de code va aller chercher les balises créées par code block.

<pre><code class="language-html">...</code></pre>

Car highlight.js se base sur les balises pre et code ainsi que la classe language-html. Notez que la classe est spécifique au langage sélectionné dans CKEditor et mise à jour en fonction.

Si vous le souhaitez, inspectez le code de la page et vous verrez la classe language-javascript car cette section est en Javascript pour l'éditeur !

Pour ce qui est d'une installation pure et simple, il est très simple. Premièrement, allez chercher un thème qui vous plaît sur https://highlightjs.org/demo

Vous trouverez ici une sélection de tous les thèmes disponibles. Ensuite, téléchargez le package npm.

npm install highlight.js

Ce package possède tous les thèmes qui existent comme sur la démo. Ensuite, dans app.js du FRONT et non du back-end comme pour CKEditor ajoutez les lignes suivantes.

import hljs from 'highlight.js';

document.addEventListener('DOMContentLoaded', (event) => {
   hljs.highlightAll();
});

Ainsi vous pouvez supprimer les scripts dans le html puisque que vous ne passez plus maintenant par un CDNJS mais par npm, ce qui les rend donc redondants.

Finalement, dans le même fichier app.js vous pouvez y ajouter le thème CSS de votre choix !

import './styles/atom-one-dark-reasonable.min.css'