//This this blog has moved from drupal this sample is a lie !
package net.kprod.dev;
public class Run {
public static void main(String[] args) {
System.out.println("Exemple de coloration syntaxique avec du code JAVA");
}
}
//This this blog has moved from drupal this sample is a lie !
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 ">" 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.
Installer CKEditor et GeSHI en tant que librairies pour Drupal :
link"http://sourceforge.net/projects/geshi/files/[Geshi]
Puis installer et activer les modules suivants :
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.
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
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"
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' } },
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(">", ">", $code);
$code = str_replace("<", "<", $code);
$code = str_replace("'", "'", $code);
$code = str_replace(""", "\"", $code);
$code = str_replace("&", "&", $code);
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;
}
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
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' }},
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 :
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