Coloration syntaxique dans Drupal 7 avec CKEditor et GeSHi

Vous utilisez Drupal 7 et vous avez un site / blog qui parle de divers codes de programmation et vous ne savez pas comment afficher votre code colorisé ? Nous allons voir aujourd’hui comment installer la dernière version de CKEditor dans Drupal 7 et y intégrer la coloration syntaxique via GeSHi. Vous pourrez ainsi facilement intégrer des extraits de code de différents langages de programmation au sein de vos articles.

Tout d’abord il faut installer le module CKEditor, qui intègre dès son activation un éditeur visuel avancé pour tous vos articles, pages, commentaires, etc. Pour pouvoir intégrer la coloration syntaxique, il faut d’abord s’assurer que la version complète de CKEditor est chargée via le CDN. Pour cela allons dans « Configuration » > « Rédaction de contenu » > « CKEditor » et dans les paramètres globaux vérifions que la version chargée intègre les plugins (version full-all).

Ceci étant fait, nous allons pouvoir activer le plugin Code Snippets en éditant le profil dans lequel nous voulons ajouter la coloration syntaxique et en cochant la case correspondante, à savoir « Editor Appearance » > « Plugins » > « Plugin for inserting Code Snippets. ». Ceci étant fait, nous remontons un peu dans la page et nous pouvons ajouter le bouton permettant d’inclure du code avec coloration syntaxique à notre barre d’outil actuelle. Les autres configurations de CKEditor n’ont pas besoin d’être modifiées. À noter qu’il y a une incompatibilité entre CKEditor et jQuery 1.10 qui fait que le bouton n’est pas sauvegardé dans la barre d’outil, dès lors je vous recommande, si vous utilisez le module jQuery Update, de forcer la version 1.7 de jQuery pour la partie administration de votre site.

Ceci étant fait, vous pouvez d’ors et déjà ajouter facilement du code à vos articles et ce code sera coloré… dans l’éditeur d’article, mais pas dans la partie publique de votre site, c’est pourquoi nous devons installer et activer le module GeSHi Filter. Ce module requiert le module Libraries API. Une fois activé, le module GeSHI Filter nécessite d’installer la librairie GeSHi en version 1.0.x (la version 1.1.x n’est à ce jour pas supportée par le module) dans le répertoire /sites/all/libraries (à créer si le répertoire libraries n’existe pas encore). Vous devrez obtenir l’arborescence suivante :

└── geshi
    ├── contrib
    ├── docs
    ├── geshi
    └── geshi.php

Passons maintenant à la configuration de GeSHi Filter. Si la librairie que vous venez d’installer n’est pas reconnue, pensez à vider tous les caches de votre site, cela devrait suffir à la faire reconnaitre. La configuration se passe dans /admin/config/content/formats/geshifilter, mais il n’y a rien de particulier à modifier dans l’onglet « Paramères généraux », les réglages de base fonctionnent très bien, à l’exception de l’option « Utiliser la fonction PHP highlight_string() pour le code source PHP. » que je vous recommande de désactiver pour éviter de voir certains symboles transformés en entités HTML à l’affichage (> devient >). Par contre, dans l’onglet « Langues » de GeSHi Filter, nous avons quelques réglages à modifier, tout d’abord il vous faut activer les langages que vous voulez pouvoir colorer sur votre site et désactiver ceux que vous n’utiliserez pas en cliquant sur « Tout », juste en dessous de l’onglet « Langues ». Une fois les langages sélectionnés, dirigez-vous dans le sous-onglet « Activé » et modifiez la rubrique « Balise/valeur de l’attribut de langage » comme suit : language-code.

Finalement, allez activer le filtre GeSHi pour le format de texte ayant la colorisation syntaxique activée dans « /admin/config/content/formats » > « Configurer » :

Et placez le filtre avant la conversion des sauts de ligne en HTML :

Après ces réglages, et éventuellement apès avoir réenregistré votre article de test, vous verrez que votre code est aussi coloré sur la partie publique de votre site, et plus uniquement dans l’éditeur. Vous remarquerez aussi peut-être que certains caractères sont encodés en HTML deux fois, ce qui fait que les < et > s’affichent en &lt; et &gt;. Pour y remédier, ouvrez le fichier /sites/all/libraries/geshi/geshi.php, repérez la partie commençant par « // Replace all newlines to a common form. » et modifiez là comme suit (merci à kProd.net pour cette astuce) :

// Replace all newlines to a common form.
$code = str_replace("\r\n", "\n", $this->source);
$code = str_replace("\r", "\n", $code);
$code = str_replace(">", ">", $code);
$code = str_replace("<", "<", $code);
$code = str_replace("'", "'", $code);
$code = str_replace(""", "\"", $code);
$code = str_replace("&", "&", $code);

Et, surtout, désactivez l’option « Utiliser la fonction PHP highlight_string() pour le code source PHP. » dans les réglages généraux du module GeSHi Filter. Videz ensuite tous les caches de votre site, rouvrez l’article et le code à problème, sauvegardez et rechargez l’article. Il devrait maintenant s’afficher correctement.

Et vous, quelle solution utilisez-vous pour coloriser votre code dans votre site Drupal ? Partagez votre expérience avec nous dans les commentaires ci-dessous.