Web en Stock

Nous avons souvent envie d’ajouter du code source ou générique (surtout du HTML ou du CSS) dans notre blog pour pouvoir donner un exemple de code. Du au format d’entrée ou a l’interprétation du navigateur, ce code ne s’affiche pas correctement ou prend alors d’autres valeurs.

Nous avons tous utilisé la solution la plus simple qui est de changer les caractères “<” par "<" et ">" par ">". De cette façon, le navigateur ne l’interprète pas comme du code et l’affiche tel quel.

Mais vous vous imaginez faire cela pour les 200 lignes de code HTML que vous voulez montrez comme exemple ? Nooonnn… Moi non plus… Alors ?

Alors, Drupal nous offre une solution grâce a un petit module bien malin : Code Filter (http://drupal.org/project/codefilter)

Grâce à ce module, si nous mettons du code entre les étiquettes <code> y </code>, le navigateur ne l’interprétera pas comme des étiquettes HTML.

Si nous écrivons
<code>
<h2>Exemple d’étiquette HTML h2 </h2>
</code>
Le module affichera

(Tip: Passer à la ligne après chaque <code> et </code>, sinon cela ne fonctionnera pas)

Mais c’est ici que Drupal devient magique : le code highlighting. Drupal reconnait le langague PHP (c’est une chance!) mais surtout le met en évidence.

Si nous écrivons
<?php
function codefilter_filter($op, $delta = 0, $format = -1, $text = '') {
// mi comentario
swith($op) {
case 'process':
return preg_replace_callback("/(.+?)<\/code>/ms",'_codefilter_process',$text);
}
}
?>
Le module affichera


Installation
1. Décharger le module de: http://drupal.org/project/codefilter et le décompresser. Copier le répertoire résultant dans (codefilter) dans site/all/modules/
2. Aller dans Administrer > Construction du site > Modules y activer le module (il est en général dans Autre)
3. Aller dans Administrer > Configuration du site > Formats d’entrée et cliquer sur ‘configurer’ pour le format avec lequel nous voulons travailler avec Code Filter. Dans la page suivante et dans la section “Filtres”, cocher la case Code filter

Voila. C’est tout! Dès maintenant nous pouvons ajouter du code dans les nodes entre <code> y </code>.

Theming
Nous pouvons donner un autre aspect au DIV qui entoure notre code en donnant d’autres valeurs à la classe “codeblock” comme je l’ai fait pour ce site:

Issues
Comme toujours il est bon de jeter un œil sur les “issues” pour le module que nous allons installer. Nous trouverons bien souvent quelques “petits” problèmes ou boges. En particulier pour ce module nous trouverons les problèmes suivants:

Incompatibilité avec FCKeditor sauf si nous déchargeons ce plugin spécial ,mais ce n’est pas tout, nous devons faire quelques “petits” changements au sein même du propre module codefilter.module, voyez ici. Je vous conseil de ne pas le faire et de simplement ne pas activer FCKeditor par défaut pour éditer les nodes dans lesquels vous allez peut-être utiliser Code Filter.

Problème de XHTML invalide con Line Break. Dès lors il est toujours recommandable de mettre le filtre “Code filter” avant le filtre “Convertisseur de saut de ligne” dans l’onglet « Réordonne » (admin/settings/filters/1/order).

Vous pouvez voir une liste complète des “issues” sur http://drupal.org/project/issues/codefilter?categories=All

Modules similaires
GeSHi Filter
Syntax highlighter

Voila... C’est tout pour aujourd’hui. J’attends vos commentaires !