Ce guide fait suite à celui concernant l'installation de Ghost sur votre propre serveur.

Pour rappel, Ghost est un moteur de blog Open Source développé en Node.js.
Ce logiciel étant très populaire dans le milieu de l'informatique, l'ajout de la coloration syntaxique est un pré-requis quasi indispensable afin d'améliorer le confort de lecture de vos articles.

Avant :
bloc code avant
Après :
bloc code après

Coloration syntaxique avec Prism.js

Pour ce faire, nous allons utiliser Prism.js.
Plusieurs thèmes pour vos futurs blocs de codes sont disponibles, allez donc faire un tour sur ce site afin de sélectionner celui qui vous plait : default, dark, funky, okaida ...etc.

Tout va se dérouler dans l'interface d'administration de Ghost, via l'onglet Code Injection.

menu ghost

Un certain nombre de balises HTML couplées à des liens vers Prism.js vont devoir être insérées.

Les liens sont à copier à partir de ce site en faisant attention de bien faire la différence entre les fichiers .css et .js.

Rendez-vous dans Code Injection > Site Header et ajoutez la ligne suivante en prenant garde de modifier le nom du thème souhaité et de modifier la version (ici 1.21.0) par la dernière disponible :

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/themes/prism-okaidia.min.css"></link>

Puis dans Code Injection > Site Footer ajoutez le code suivant, toujours en veillant à modifier la version :

<!-- Core -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/prism.min.js"></script>

<!-- All individual language files -->

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/components/prism-bash.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/components/prism-ini.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/components/prism-shell-session.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/components/prism-json.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/components/prism-sql.min.js"></script>

C'est dans le Site Footer que vous allez pouvoir sélectionner quels langages disposeront de la coloration syntaxique.
Dans l'exemple précedent il s'agit de bash, ini, shell, json et sql.

Il vous suffit d'ajouter une ligne par langage, la liste se situant ici.

Par exemple, pour ajouter le support de Java, on ajoutera la ligne suivante à la fin du Site Footer :

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/components/prism-java.min.js"></script>

Ajout de la numérotation des lignes

Rendez-vous dans Code Injection > Site Header et ajoutez ces lignes tout en veillant à ce que 1.21.0 corresponde à la dernière version :

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/plugins/line-numbers/prism-line-numbers.min.css"></link>
<style>
    pre[class*=language-] {
        margin: 1.75em 0;
        font-size: 1.4rem;
        background: #111;
    }
</style>

Puis dans Code Injection > Site Footer :

<script>
    window.addEventListener('DOMContentLoaded', (event) => {
        document.querySelectorAll('pre[class*=language-]').forEach(function(node) {
            node.classList.add('line-numbers');
        });
        Prism.highlightAll();
    });
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/plugins/line-numbers/prism-line-numbers.min.js"></script>

Vous bénéficiez maintenant de la coloration syntaxique ainsi que de la numérotation des lignes !😃

Source :

Partager cet article :