Licence Publique Générale GNU Version 2
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.
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 :
La même chose avec des numéros de ligne :
Je n'avais pas pensé à l'origine que ce code puisse intéresser certains. Il est donc tout vilain à l'intérieur
Dés que j'aurais le temps, j'y mettrais un grand coup de propre.
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 :
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 :
Ou encore
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.
- répondre
jaguarondi, le 16 May, 2008 - 09:28Y'a pas déjà un module qui fait la même chose?
http://drupal.org/project/geshifilter
- répondre
Ulhume, le 16 May, 2008 - 09:34Oui alors là c'est pas juste, le mien est vachement plus vieux
Ceci dit, j'aime bien mon système de bascule full texte/colorisé. Mais bon, tu m'as cassé le moral, c'est fini
- répondre
armetiz , le 19 May, 2008 - 08:32Geshifilter n'a pas un switch entre "full texte/colorisé"
Merci Ulhume
- répondre
Ulhume, le 19 May, 2008 - 09:13@armetiz you're welcome
Faudrait que je fasse un coup de ménage par politesse si tu l'utilises.
- répondre
Arno974 , le 12 July, 2008 - 09:10Merci 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 !
- répondre
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
. Ceci dit, on m'a rapporté que la bascule posait des soucis sur FF 3.x, c'est le cas chez vous ?
- répondre
Arno974 , le 12 July, 2008 - 09:48Bonjour,
J'en suis toujours a essayer de l'utiliser. Il refuse obstinément de colorer mon code
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
- répondre
Ulhume, le 12 July, 2008 - 10:39Test
<code type="php">
<? print "hello"; ?>
</code>
- répondre
Arno974 , le 12 July, 2008 - 13:43Je ne comprends pas où ça coince :
http://ks356007.kimsufi.com/arno/geotribu/?q=node/7
Pourtant tout à l'air bien paramétré
Arnaud
- répondre
Ulhume, le 12 July, 2008 - 14:01Il 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.
- répondre
Arno974 , le 12 July, 2008 - 14:12Bien vu pour l'espace mais malheureusement ce n'est pas ça
- répondre
Ulhume, le 12 July, 2008 - 14:15tu as vidé les caches ?
- répondre
Arno974 , le 14 July, 2008 - 10:18YES 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
! J'abuse peut être 
Arnaud
- répondre
Ulhume, le 14 July, 2008 - 11:00@Arno j'allais te le proposer
Envoies moi un mail à
- répondre
Arno974 , le 14 July, 2008 - 17:41Je 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 ?
- répondre
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 ??
- répondre
Osku, le 7 October, 2008 - 23:27Dis, j'ai l'ambition de porter une partie de ce module sous Dotclear pour ne pas le citer.
Actuellement voilà ce que j'ai :
) -> ici le code
Une classe JavaScript qui transforme mes pre en ol (sans jQuery
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
et merci pour ton aide.
- répondre
Ulhume, le 7 October, 2008 - 23:33@Osku il faudrait peut-être que tu me dises ce qui coince exactement ? non ?
- répondre
Osku, le 7 October, 2008 - 23:40Oui mais non
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é
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
- répondre
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
Tu me diras lorsqu'il sera dispo que je colle un lien d'ici ?
- répondre
Osku, le 7 October, 2008 - 23:50Tout 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
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é
- répondre
Ulhume, le 7 October, 2008 - 23:55Bof 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
- répondre
Osku, le 8 October, 2008 - 00:28Pas 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
)
Tu vois pas d'inconvénient à ce que je modifie un tantinet la CSS ?
- répondre
Ulhume, le 8 October, 2008 - 00:47Oh bé pas du tout, vas y, hacke, c'est fait pour ça
- répondre
Osku, le 9 October, 2008 - 10:18Done : 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
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
- répondre
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