Coloration syntaxique avec Drupal 7, CKEditor et GeSHi

Introduction

package net.kprod.dev;
 
public class Run {
    public static void main(String[] args) {
        System.out.println("Exemple de coloration syntaxique avec du code JAVA");
    }
}

Mettre en place une solution de coloration syntaxique pour Drupal, fonctionnant de concert avec un éditeur de texte riche est un véritable cauchemar !

C'est en tout cas l'expérience que j'en ai fait ; cette cohabitation peut causer de nombreux problèmes ; notamment, lors du rendu, la confusion des caractères et de leur codes HTML : Les ">" deviennnent des "&gt" sur votre article...

On trouve nombre de références autour de ce sujet, je vais m'efforcer ici d'expliquer la méthode que j'ai employée.

J'ai essayé les combinaisons suivantes, sans succès :

  • TinyMCE + SyntaxHighligther
  • TinyMCE + SyntaxHighligther + Wysiwyg Filter
  • TinyMCE + GeSHi
  • TinyMCE + GeSHi + Wysiwyg Filter

Pour diverses raisons, ces combinaisons ne m'ont pas données satisfaction. Il se peut toutefois que je n'ai pas réussi à mettre la main sur "la bonne configuration".

La solution que je présente ici utilise l'éditeur CKEditor et le module de coloration syntaxique GeSHi. Je précise qu'elle nécessite toutefois des manipulations relativement complexes, tant dans l'interface de Drupal (qui n'est pas un modèle d'ergonomie) que dans les fichiers de CKEditor et de GeSHi.

Procédure d'installation

Installation des librairies et des modules

Installer CKEditor et GeSHI en tant que librairies pour Drupal :

Puis installer et activer les modules suivants :

Configuration des modules et Drupal

Configuration GeSHi

Dans la liste des modules, cliquer sur le lien "Configure" correspondant au module GeSHi Filter et définir les options suivantes :

  • Generic syntaxt highlightning tags : "code blockcode pre"
  • Container tag style : cocher <foo> et [foo]
  • Cocher "Inline CSS Style attribute"
  • Cocher "GESHI_HEADER_PRE_VALID"

Puis, dans l'onglet "Languages", cocher les languages que vous utiliserez.

Text Format

Créer un nouveau Text Format, nommé par exemple "Wysiwyg GeSHi" (Configuration > Content Authoring > Text Format).

Lors de la création d'un nouveau contenu, il faudra choisir celui-ci pour bénéficier de la coloration syntaxique.

Active les filtres suivants (dans l'ordre) :

  • GeSHi filter
  • Convert line breaks into HTML

Configuration CKEditor

Dans la page Configuration de Drupal, cliquer sur CKEditor, puis éditer le profil correspondant au Text Format "Wysiwyg GeSHi" précédement défini.

  • Text Formats : Cocher le Text Format créé précédemment
  • Plugins : Cocher "Geshi plugin"

Modification des fichiers GeSHi / CKEditor

Personnalisation des Styles de CKEditor

Pour éviter d'avoir à passer en édition HTML pour entourer le code des balises <pre>...</pre>, j'ajoute les options de colorations dans le menu "Styles". Celui-ci devra évidemment être activés dans les barres utilitaires de CKEditor. Certains parviennent à ajouter les boutons dans l'interface, mais j'ai trouvé cette solution plus simple à mettre en oeuvre.

Tout d'abord, il faut copier ce fichier dans le répertoire de votre thème courant de

modules/ckeditor/ckeditor.styles.js

vers

sites/all/themes/NOM_THEME/ckeditor.styles.js

Puis, pour disposer des raccourcis ad-hoc dans CKEditor, il est nécessaire de modifier le fichier ckeditor.styles.js.

Editer le fichier afin d'ajouter des raccourcis de formatage dans le menu "Styles" de CKEditor :

if(typeof(CKEDITOR) !== 'undefined') {
    CKEDITOR.addStylesSet( 'drupal',
    [
    // GeSHi Styles
    { name : 'Code' , element : 'pre' },
    { name : 'Code Bash' , element : 'pre', attributes : { 'language' : 'bash' } },
    { name : 'Code Perl' , element : 'pre', attributes : { 'language' : 'perl' } },
    { name : 'Code Java' , element : 'pre', attributes : { 'language' : 'java' } },
    { name : 'Code PHP' , element : 'pre', attributes : { 'language' : 'php' } },
    { name : 'Code Javascript' , element : 'pre', attributes : { 'language' : 'javascript' } },
    { name : 'Code HTML' , element : 'pre', attributes : { 'language' : 'html4strict' } },
    { name : 'Code CSS' , element : 'pre', attributes : { 'language' : 'css' } },
    { name : 'Code MySQL' , element : 'pre', attributes : { 'language' : 'mysql' } },
    { name : 'Code jQuery' , element : 'pre', attributes : { 'language' : 'jquery' } },
    { name : 'Code XML' , element : 'pre', attributes : { 'language' : 'xml' } },

Conversion des entitées

Editer le fichier sites/all/libraries/geshi/geshi.php

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

Edition des styles de GeSHi

J'ai modifié modules/geshifilter/geshifilter.css afin de diminuer la taille des polices. Il est possible d'éditer d'autres options dans ce fichier.

div.geshifilter pre {
  margin: 0;
  padding: 0;
  line-height: 1.3;
  font-size: 1em;
}

Problèmes liés

Création d'un sous-thème de back office

J'ai créé un sous-thème Back Office afin de personnaliser ckeditor.styles.js

Lors de la création d'un sous-thème graphique, une erreur m'empêchait d'aller plus loin : "the destination directory public://... is not configured correctly"

Il suffit pour contrer ce problème de supprimer sites/default/files/color

Bug avec la balise <code>

Je ne sais pas s'il s'agit d'un corolaire à mes modifications, ou d'un bug de CKEditor :

Le code inline entouré de balises <code>...</code> disparait lors d'une édition ultérieure en mode texte riche (il est toujours présent dans le source).

Afin de palier à ce problème j'ai créé un nouveau style ajouté à ckeditor.styles.js qui utilise la balise span :

{ name : 'Inline Code'    , element : 'span', attributes : { 'class' : 'inline_code' } },

Utilisation

Mettre en valeur le code

Créer un nouveau contenu. Basculer Text Format sur le format défini pour l'utilisation avec la coloration syntaxique :

 

Surligner le code. Puis, à l'aide du drop-down "Styles", sélectionner un langage de programmation pour la coloration syntaxique :

Le résultat en front :

Astuces

Je conseille de ne pas copier/coller le code directement dans CKEditor, mais de passer par un éditeur "neutre", par exemple Notepad++, pour ne pas polluer le code et le mettre en forme en dehors de CKEditor

Ressources

http://drupal.org/node/290279

http://peterpetrik.com/blog/ckeditor-and-geshi-filter

http://www.drupaleverything.com/content/drupal-how-configuring-your-input-formats