Module 'Code Highlighter' pour Drupal
Le 16 mai 2008, à 0:52 par Ulhume...

Historique (tout afficher)
  • v1 - Petites corrections. (2008-11-13 13:14)

Éditions disponibles

Project license

Licence Publique Générale GNU Version 2

De quoi ça cause ?

Ce module est celui utilisé sur le site pour colorier le code source. Il utilise en interne l'excellent moteur de colorisation GeSHI.

Pour l'utiliser, il faut déjà activer le module et ajouter le filtre dans l'administration Drupal. Ensuite il y a deux modes d'utilisation : code et traces.

Pour les utilisateurs de DotClear2, Osku a développé un version équivalent à ce module que vous pouvez trouver ici.

Mode \"code\"

Il s'agit du mode classique de colorisation de code. On l'obtient en encadrant le fragment par une balise <code type="un langage" caption="un titre">. L'attribut caption est optionnel et permet d'ajouter un titre au fragment de code. L'attribut type reçoit le langage à utiliser pour le fragment. Il s'agit de n'importe quel langage reconnu par GeSHI, autant dire que la liste est longue. Le résultat, pour du PHP est le suivant :

/**
 * Prepare the texte for being displayed :
 *    - remove extra left margin
 *    - replace special characters
 *
 */

function _code_highlighter_prepare_text($text) {
  // Calculating minimum left margin
  $test=str_replace("\t", str_repeat(" ",code_highlighter_tabulation_size()),$test);
  $lines= explode("\n", $text);
  $ident= 255;
  foreach ($lines as $line) {
    $iPos= 0;
    if (strlen(trim($line)) != 0) {
      while ((($char= substr($line, $iPos, 1)) == " ") && ($iPos < strlen($line))) {
        $iPos++;
      }
      if ($iPos < $ident) {
        $ident= $iPos;
      }
    }
  }
}
fonction _code_highlighter_prepare_text

La même chose avec des numéros de ligne :

  1. # vérifie que la machine cible est allumée et initialize la sauvegarde
  2. sub check_host {
  3.   # analyse des arguments
  4.   %host = (
  5.     fs        => "ssh",
  6.     method    => "rdiff",
  7.     name      => undef,
  8.     address   => undef,
  9.     path      => undef,
  10.     root      => "",
  11.     @_
  12.   );
  13.   if (!defined $host{address}) {
  14.     $host{address}=$host{name};
  15.   }
  16.   $host{path}="$storage_path/$host{name}";
  17.   mkpath ($host{path});
  18.  
  19.   # on vérifie que le host est bien UP
  20.   my $ping = Net::Ping->new("icmp");
  21.   my $is_up = $ping->ping($host{address});
  22.   $ping->close();
  23.   if (!$is_up) {
  24.     # le host est down, rien à faire de plus
  25.     trace_debug("'$host{name}' is down, leaving.");
  26.     return 0;
  27.   }
  28.  
  29.   return 1;
  30. }
Vérification de l'état de la machine

Je n'avais pas pensé à l'origine que ce code puisse intéresser certains. Il est donc tout vilain à l'intérieur Wink Dés que j'aurais le temps, j'y mettrais un grand coup de propre.

Mode \"traces\"

Ce mode là n'est pas présent dans les autre système de colorisation. Il s'agit de mettre en valeur une série d'opérations en ligne de commande et les résultats associés. Cela peut être des traces de Bash, Groovy, etc...

On obtient se mode en encadrant le fragment par une balise <traces type="un langage" caption="un titre">. L'attribut caption est optionnel et permet d'ajouter un titre au fragment de code. L'attribut type reçoit le langage à utiliser pour le fragment. Il s'agit là ausi de n'importe quel langage reconnu par GeSHI.

Jusque là c'est très proche de code. La différence se situe au niveau du traitement effectué sur le fragment. Le système l'interprète ligne à ligne. Lorsqu'un motif $$ est détecté sur une ligne, elle est coupée en deux fragments, le premier est considéré comme étant une invite (prompt), le second une commande du langage spécifiée dans l'attribut type et sera donc colorisée par GeSHI. Si la ligne ne contient aucun motif $$, elle est considérée comme étant le résultat d'une commande précédente. A noter que les commentaires à la mode du langage cible sont utilisables en posant un motif $$ juste avant, en tout début de ligne (invite vide). Ce qui nous donne :

  • gaston$$$ ls -la : une invite (gaston$) et une commande (ls -la)
  • root#$$ useradd gaston : une invite (root#) et une commande (useradd)
  • $$# un commentaire
  • Un résultat....

L'avantage de l'approche $$ plutôt que de chercher à interpréter ce qu'est une invite sur une ligne est qu'il est possible de mixer un peu les langages. Par exemple lorsque qu'une commande Bash donne lieu à un sous-interpréteur, par exemple ftp :

# ceci est un commentaire
gaston$ftp mon_server
Welcome the Gaston FTP Server
ftp>ls
readme.txt
ftp>get readme.txt
file received.
ftp>quit
gastion$
gastion$ 
session FTP

Ou encore

gaston$groovy
groovy>for (int i=0; i < 1; i++) { println ("Hello World!!"); }
Hello World!!!
Hello World!!!
groovy> 
Groovy Hello World

Bascule texte simple / texte colorisé

Un peu de Javascript/JQuery permet lorsque l'utilisateur survole la zone avec sa souris, d'afficher un petit bouton en bas à droite permettant de basculer alternativement de texte non colorisé à texte colorisé. Ceci lui permet de faire des copier/coller sans problèmes.

Commentaires

jaguarondi, le 16 May, 2008 - 09:28

Y'a pas déjà un module qui fait la même chose?
http://drupal.org/project/geshifilter

Ulhume, le 16 May, 2008 - 09:34

Oui alors là c'est pas juste, le mien est vachement plus vieux Smiling

Ceci dit, j'aime bien mon système de bascule full texte/colorisé. Mais bon, tu m'as cassé le moral, c'est fini Smiling

armetiz , le 19 May, 2008 - 08:32

Geshifilter n'a pas un switch entre "full texte/colorisé" Sticking out tongue
Merci Ulhume

Ulhume, le 19 May, 2008 - 09:13

@armetiz you're welcome Smiling Faudrait que je fasse un coup de ménage par politesse si tu l'utilises.

Arno974 , le 12 July, 2008 - 09:10

Merci pour ce plugin,

Je cherchais une alternative a http://drupal.org/project/geshifilter et celui que vous avez fait est parfait. J'aime bien le basculement texte/code.
C'est juste dommage qu'il soit uniquement disponible en svn ... Cela restreint le nombre de personnes qui le téléchargeront !

Ulhume, le 12 July, 2008 - 09:18

@Arno il faut que j'automatise la création de tgz (j'ai horreur de faire des choses à la main Wink. Ceci dit, on m'a rapporté que la bascule posait des soucis sur FF 3.x, c'est le cas chez vous ?

Arno974 , le 12 July, 2008 - 09:48

Bonjour,

J'en suis toujours a essayer de l'utiliser. Il refuse obstinément de colorer mon code Frown
Pourtant il me semble bien tout avoir activé (module dans admin, création de la page avec un code type="php" à l'intérieur pour essayer, j'ai même paramétrer les input format mais sans résultat).

Une solution peut être ?

Arnaud

Ulhume, le 12 July, 2008 - 10:39
Juste pour être sur de partir sur de bonnes bases, la procédure est la suivante :
  1. Activer le module
  2. Aller dans ?q=admin/settings/filters
  3. dans tous les formats d'entrée que l'on souhait utiliser avec ce module, activer Code Highlighter filter. Il faut absolument que ce filtre soit coché et soit le premier de la liste.
  4. Créer un node
  5. Taper un code de test, genre :
    Test
    <code type="php">
    <? print "hello"; ?>
    </code>
  6. Activer un format d'entrée qui a été modifié à la phase (3).
  7. Valider.
Arno974 , le 12 July, 2008 - 13:43

Je ne comprends pas où ça coince :

http://ks356007.kimsufi.com/arno/geotribu/?q=node/7

Pourtant tout à l'air bien paramétré

Arnaud

Ulhume, le 12 July, 2008 - 14:01

Il semble que tu ais un espace de trop à la fin de ta balise code, entre le e et le >.

Désolé, le matching est un peu intransigeant.

Arno974 , le 12 July, 2008 - 14:12

Bien vu pour l'espace mais malheureusement ce n'est pas ça Frown

Ulhume, le 12 July, 2008 - 14:15

tu as vidé les caches ?

Arno974 , le 14 July, 2008 - 10:18

YES caches du site vidés, firefox également mais rien n'y fait.

Si je te donne un accés au site, cela te dérangerait-il de jeter un coup d'oeil et me dire d'où cela pourrait venir ? Cela serait vraiment super Smiling ! J'abuse peut être Sticking out tongue

Arnaud

Ulhume, le 14 July, 2008 - 11:00

@Arno j'allais te le proposer Smiling

Envoies moi un mail à

Arno974 , le 14 July, 2008 - 17:41

Je crois comprendre ce qui ne marche pas !
J'utilise pour écrire mes pages TinyMCE c'est cela qui semble bloquer Highlighter !
Dommage ! Cela ne marche pas avec un éditeur de texte ?

Ulhume, le 14 July, 2008 - 20:06

@Arno974 Si tu utilises un plugin qui va torpiller le code HTML sous-jacent, non, ça ne marchera effectivement pas. Et effectivement, la raison est sûrement là. Tu peux essayer de basculer en saisie HTML sur TinyMCE pour saisir le code en espérant qu'il ne le torpillera pas à la validation.

Il marche l'autre module Geshi avec TinyMCE ??

Osku, le 7 October, 2008 - 23:27

Dis, j'ai l'ambition de porter une partie de ce module sous Dotclear pour ne pas le citer.

Actuellement voilà ce que j'ai :
Une classe JavaScript qui transforme mes pre en ol (sans jQuery Sticking out tongue) -> ici le code
L'éditeur intégré pond des pre pour les codes préformattés.
L'idée derrière celà est d'éviter la migration des billets existant des utilisateurs (transformer dans leur contenu les blocs préformattés en tout autre chose)

1ère étape, on transforme les pre en ol
2ème étape, par une moulinette jQuery, je les encapsule dans les 3 divs code-contenaire-area etc
3ème étape, je réutilise avec bonheur ton astuce pour permettre le copier/coller depuis un

Mais ça coince..

J'espère que je t'ai pas perdu Wink et merci pour ton aide.

Ulhume, le 7 October, 2008 - 23:33

@Osku il faudrait peut-être que tu me dises ce qui coince exactement ? non ? Wink

Osku, le 7 October, 2008 - 23:40

Oui mais non Big grin
Ca coince plus...

Ce qui coinçait était l'appel de ma moulinette jQuery pour l'encapsulage.
Résolu en ajoutant tout simplement des addLoadListener(mafonction);

En fait, je te laisse regarder :
http://www.sakeco.net/blog/themes/wmegalight/js/pre2ol.js

Je suis bien content d'y être arrivé Smiling depuis le temps que je bave sur tes blocs de code avec l'effet de fadein/fadeout.

D'ici peu un plugin sera dispo pour Dotclear 2. Je ne manquerai pas de citer dans les crédits Smiling

Ulhume, le 7 October, 2008 - 23:44

@Osku chapeau ! Et pourquoi tu n'utilises pas jQuery ? Il est pas en standard dans DotClear ?

En tout merci d'avoir laisser ma marque dans ton code, ça fait plaisir Smiling

Tu me diras lorsqu'il sera dispo que je colle un lien d'ici ?

Osku, le 7 October, 2008 - 23:50

Tout simplement parce que je suis incapable d'écrire l'équivalent jQuery de la fonction qui transforme mes pre en ol
Si je trouve, j'adapterai mais en attendant walou Wink
Et oui jQuery est bien en standard dans Dotclear même que j'en ai besoin (wrap + ton code)

Donc ça fait un plugin un peu bancal car pas 100% jQuery mais qui au final aura un effet dévastateur. Et c'est bien le but recherché Smiling

Ulhume, le 7 October, 2008 - 23:55

Bof l'important est qu'il fasse le job. Félicitation en tout cas, et n'oublie pas ce que je t'ai dis pour le lien, ça permettra de montrer ici autre chose que du Drupal Wink

Osku, le 8 October, 2008 - 00:28

Pas de souci je donnerai tout ça .

Ici pour une démo : http://www.sakeco.net/blog/tag/jQuery

Il me reste à nettoyer le code et personaliser la CSS de manière que ce soit portable quelque soit le type de layout (chez toi, le bouton text simple se câle à 280px du bord droit - sympa sauf si le design est fixe Smiling )

Tu vois pas d'inconvénient à ce que je modifie un tantinet la CSS ?

Ulhume, le 8 October, 2008 - 00:47

Oh bé pas du tout, vas y, hacke, c'est fait pour ça Smiling

Osku, le 9 October, 2008 - 10:18

Done : http://www.sakeco.net/blog/pre2ol pour les informations du plugin pour Dotclear 2

J'ai laissé tes infos dans le fichier JavaScript (sauf si tu souhaites garder l'anonymat)

PS: Il me reste un petit souci sous FFx3 concernant le lien "retour à l'affichage précédent" qui n'est pas facile à attraper Wink

PS 2: Ton site me donne vraiment envie de passer/jeter un oeil à Drupal ou porter toutes les fonctionnalités que je vois vers Dotclear Big grin

Ulhume, le 28 October, 2008 - 22:17

@Osku je l'ai ajouté à l'article. Moi je me demande avec le temps si je ne vais pas inverser la logique et mettre par défaut sans n° de lignes avec activation au besoin.

Poster un nouveau commentaire

Le contenu de ce champ est gardé secret et ne sera pas montré publiquement.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • To highlight piece of code, just surround them with <code type="language"> Your code &tl;/code>>. Language can be java,c++,bash,etc... Everything Geshi support.
  • Les lignes et les paragraphes vont à la ligne automatiquement.
  • Textual smileys will be replaced with graphical ones.
  • Les adresses de pages web et de messagerie électronique sont transformées en liens automatiquement.

Plus d'informations sur les options de formatage

Connexion utilisateur
Les derniers bavardages...