Prism.js : coloration syntaxique sans plugin pour WordPress

prismjsAfficher de belle manière des lignes de code sous WordPress nécessite à priori l’installation d’un plugin dédié, comme par exemple SyntaxHighlighter Evolved.

Je l’avais abandonné quand le blog était hébergé chez Free, et que la consommation mémoire était limitée (voir Adieu SyntaxHighlighter). Il occupait environ 400 Ko de mémoire environ d’après ce que j’avais pu mesurer.

J’étais alors passé à quelque chose de beaucoup plus simple, un autre plugin appelé Code Autoescape, mais qui ne fait pas de coloration syntaxique, il permet juste de s’assurer que ce que l’on écrit entre deux balises <code></code> ne soit pas interprété. Léger en mémoire, certes beaucoup moins joli visuellement, mais très efficace.

Voilà ce que peut donner SyntaxHighlighter, avec beaucoup de possibilités (presque trop), comme numéro de ligne, surlignage, de nombreux langages supportés, etc… Et un peu chargé visuellement à mon goût !

SyntaxHighlighter

Et voilà ce que donne un petit script bash avec CodeAutoescape : plus basique, c’est difficile ! J’avais tout de même ajouté une petite image de terminal pour améliorer l’apparence 😉

Affichage code minimaliste

Or je suis tombé cette semaine sur cet article : How To Implement Prism.js Syntax Highlighting Into Your WordPress Site. Il s’agit de ne pas utiliser un plugin, mais d’incorporer au site quelque chose de beaucoup plus léger, créé avec les standards modernes du web : Prism. On peut par exemple ne sélectionner que les langages qui nous intéressent, ce qui réduit considérablement la taille mémoire occupée (il n’y pas d’options non plus, on peut juste choisir un thème, mais cela me convient parfaitement).

Voilà ce que donne le même script bash avec Prism.js :

#! /bin/sh
# nom du fichier : replaceall.sh
# pas de SAUVEGARDE des fichiers faite par ce script.
find . -type f -name '*.html' -print | while read i
do
sed "s|$1|$2|g" $i > $i.tmp && mv $i.tmp $i
done

Avouez que c’est tout de même nettement mieux, tout en restant sobre !

Voyons comment implémenter tout ça : l’article cité plus haut est très complet, je ne rentrerai pas dans tous les détails et remarques, il s’agit juste d’expliquer comment l’implémenter sur son blog wordpress, en français.

1ère étape : Sélection et téléchargement

Il faut d’abord se rendre sur la page de téléchargement de Prism, afin de sélectionner les langages que l’on souhaite, puis télécharger les deux fichiers nécessaires, à savoir prism.js et prism.css.

  1. Sélectionner d’abord « Minified version » dans la section « Compression level » : seule la partie javascript sera compressée, mais c’est toujours ça de pris.
  2. Sélectionner le thème que vous préférez : vous pouvez voir les différentes rendus de chaque thème sur la page d’accueil, en le sélectionnant (les petits cercles en haut à droite : default, dark, funky, etc..), puis en regardant le rendu dans les exemples de la page d’accueil. Pour ma part, j’ai choisi le Default.
  3. Sélectionner les langages souhaités : par défaut, quatre langages sont déjà sélectionnés, à vous de choisir dans la longue liste si d’autres vous sont nécessaires. Pour ma part, j’ai juste rajouté le « bash » et le « php ».

prism-languages

Une fois ceci fait, rendez-vous en bas de la page : on vous indique la taille des deux fichiers (15,93Ko pour les deux fichiers dans mon cas, à comparer avec les 400Ko de SyntaxHighlighter !!) ; il ne reste plus qu’à télécharger les deux fichiers :prism.js et prism.css.

prism-download-500

2ème étape : Installation

L’auteur de l’article insiste ici sur l’intérêt d’utiliser un thème enfant (child theme) plutôt qu’un thème parent. C’est une bonne pratique, cela permet entre autres de pouvoir mettre le thème parent à jour sans perdre des modifications apportées sur le thème enfant. Pour ma part, j’utilise le thème FourteenPress, qui est un thème enfant de FourteenPress.

Quoiqu’il en soit, placer les deux fichers prism.js et prism.css précédemment récupérés dans le dossier de votre thème.

Nous allons maintenant ajouter une nouvelle fonction à WordPress de manière à charger ces deux fichiers. Si vous utilisez un thème enfant, c’est sans doute plus facile, le fichier functions.php n’existe peut-être même pas ! Voilà donc ce qu’il faut y mettre (ou ajouter à l’existant le cas échéant) :

<?php

// Function to add prism.css and prism.js to the site
function add_prism() {
    // Register prism.css file
    wp_register_style(
        'prismCSS', // handle name for the style so we can register, de-register, etc.
        get_stylesheet_directory_uri() . '/prism.css' // location of the prism.css file
    );
    // Register prism.js file
    wp_register_script(
        'prismJS', // handle name for the script so we can register, de-register, etc.
        get_stylesheet_directory_uri() . '/prism.js' // location of the prism.js file
    );
    // Enqueue the registered style and script files
    wp_enqueue_style('prismCSS');
    wp_enqueue_script('prismJS');
}
add_action('wp_enqueue_scripts', 'add_prism');

?>

3ème étape : Utilisation

Il ne reste maintenant plus qu’à utiliser les balises suivantes pour démarrer les blocs de code : <pre><code class="language-bash"> pour le bash, <pre><code class="language-javascript"> pour le javascript, <pre><code class="language-markup"> pour le HTML, etc… Voilà un autre exemple avec le javascript :

var myObject = {
    property1: "something",
    property2: 5,
    property3: true
}; 

Et voilà !

Problèmes rencontrés

J’ai tout de même rencontré un petit souci lors de l’implémentation de Prism.js : j’avais oublié de désactiver le plugin CodeAutoescape ! Ce qui fait qu’à chaque fois que je voulais utiliser <pre><code class="language-bash"> par exemple, il était systématiquement remplacé par <pre><code> …. Donc attention à un éventuel conflit avec un plugin de ce genre.

Il faut d’ailleurs toujours utiliser l’onglet « Texte » de l’éditeur WordPress pour insérer du code dans un article, sinon le TinyMCE Editor (onglet Visuel) risque fort d’interpréter certains caractères et de modifier complètement ce que l’on a tapé, et bien sûr le rendu de l’article.

Autre remarque : même en utilisant l’onglet « Texte », j’ai rencontré des problèmes. Il faut alors utiliser les HTML entities à la place, typiquement pour le caractère « <" annonçant ducode PHP. Par exemple, taper ceci dans l'éditeur : entities
Plutôt que cela :
noentities
Le signe inférieur qui sert à indiquer le langage PHP est interprété alors qu’il ne devrait pas…

2 réflexions sur « Prism.js : coloration syntaxique sans plugin pour WordPress »

Répondre à leclerc-web Annuler la réponse

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *