Mettre des exemples de code javascript ou autres dans un article

Appréciation moyenne:  / 2
Très mauvaisTrès bien 

Comment mettre des exemples de code javascript, php ou autres dans des articles

en général, on aime bien utiliser JCE en tant qu'éditeur, et c'était aussi mon choix.

Mais depuis que j'ai découvert FCKEditor et son adaptation pour Joomla, JoomlaFCK, ben j'ai changé...
Ce document est donc basé sur ce nouvel éditeur, mais peut-être que les manipulations indiquées ici fonctionneront avec un autre éditeur...

Le problème:

je souhaite montrer quel code javascript, php, html ou autre j'utilise, dans certains cas, et j'ai longtemps cherché avec JCE comment je pourrais faire.
Pas de coloration syntaxique par défaut, une présentation banale, enfin rien d'intéressant inclus avec JCE.

Les solutions:

J'ai d'abord cherché un plugin à JCE qui intégrerait un bouton à sa barre d'outils, afin de faire dans le simple.

RJ_Insert_Code:

J'en ai trouvé un, RJ_Insert_Code, mais il bugue beaucoup avec ma config sans doute, jusquà crasher mon navigateur Opera favori.
J'ai donc laissé tomber, après de multiples essais, paramètrages, car le plugin semblait quand-même prometteur...

Composant joomla Geshi par défaut, Content - Code Hightlighter (GeSHi):

Ensuite, je suis allé voir le composant Geshi installé par défaut dans Joomla.

Malheureusement, avec JCE il y a un gros problème:

Pour utiliser Geshi, c'est assez simple en fait, il suffit d'éditer le code source de l'article dans JCE, soit avec le bouton "Editer code", soit avec le [show/hide] qui permet aussi de voir le source.
Ensuite, pour la partie code que l'on souhaite colorer et mettre en forme, on rajoute au début la balise:

<pre xml:lang="php">
puis mon code proprement dit et, à la fin, la balise de fermeture:
</pre>

Le problème, c'est que, quelque soit la config de l'éditeur, celui-ci, à la sauvegarde, élimine ce qu'il y a après lang pour ne laisser qu'un guillement double (") et la suite de l'article est foireuse.

J'ai trouvé sur le web comment corriger ce problème, du au fait apparemment que le composant geshi utilise une balise non conforme: lang.

Corriger geshi:

aller éditer le fichier:
/plugins/content/geshi.php

pour modifier cette ligne:

$regex = "#<pre xml:\s*(.*?)>(.*?)</pre>#s";

comme ceci:

$regex = "#<pre class=\"geshi-([^\"]+)\">(.*?)</pre>#s";

Ensuite, lors d'un appel à geshi, il suffit, à la place de xml:lang, d'utiliser cette syntaxe:
class="geshi-javascript"
le code devient donc:


<pre class="geshi-javascript"> puis mon code proprement dit et, à la fin, la balise de fermeture:

 

Voilà, cette partie de l'article est d'ailleurs colorée avec cette technique, et vous pouvez remarquer quelle galère c'est, il affiche les balises, parfois non.

Existe-t-il un composant pratique et agréable à utiliser?

CodeCitation, un composant joomla pour coloriser le code inséré dans nos article: ça promet!!!

en parallèle à la correction du bug du composant geshi par défaut, j'ai cherché un autre composant qui ferait la même chose sans défaut. J'ai essayé CodeCitation, que j'ai finalement adopté. Il s'appuie sur une bibliothèque de javascript nommée SyntaxHighlighter

Avant d'aller plus loin dans l'installation, la configuration et l'utilisation de CodeCitation, voici un exemple de code javascript coloré syntaxiquement avec geshi:


var Inclus_Slimbox = function() //event
{ var source_script = '';
$(document.html).getElements('script').each(function(item) {
source_script = item.src; // si trouve slimbox le supprimer
if(source_script.search('slimbox_1_7.js')!= -1) { item.dispose(); } }); //injecter slimbox:
var myScript = new Asset.javascript('/chemin_complet_au_repertoire_des_scripts/slimbox_1_7.js'); }

 

Pour ceux qui suivent, les plus curieux, on remarquera que le code coloré par geshi n'est pas vraiment du javascript. Pour s'en convaincre, un petit tour dans le source du document, et on retrouve, encadrant le code:

 

<pre class="php">

alors qu'on lui demandait du js.

Bref, un autre bug dont j'ai vu une correction sur le web, mais sur laquelle je ne vais pas me pencher plus avant maintenant que j'ai trouvé autre chose de plus zouli smiley

et du code coloré avec CodeCitation:


	var Inclus_Slimbox = function() //event {

	var source_script = ''; $(document.html).getElements('script').each(function(item) { source_script = item.src; 

        // si trouve slimbox le supprimer 

        if(source_script.search('slimbox_1_7.js')!= -1) 

        { item.dispose(); } }); 

        //injecter slimbox: 

        var myScript = new Asset.javascript('/chemin_complet_au_repertoire_des_scripts/slimbox_1_7.js'); } 

       

Pour ceux qui se demandent à quoi peut bien servir cette fonction, voir cet article: Utiliser slimbox sur des éléments intégrés via ajax

Voilà, c'est du propre et du beau!

Alors installons le truc:

D'abord, téléchargez le plugin.

Ensuite, passez dans le backend joomla, menu extensions, installer/désinstaller. suivre la procédure standard d'installation pour un addon joomla, c'est du tout cuit.

Activez le plugin, il n'y a pas de paramètre.

Nous allons maintenant passer à l'utilisation de ce composant dans nos articles, que du bonheur je tiens à le dire tout de suite, et pour le moment.

 

Utilisation de CodeCitation:

Bon, si je mets les tags CodeCitation comme ça sans précaution dans la page, ils vont être interprétés. Parce que, pour utiliser ces tags, c'est tout simple, il suffit de les mettre dans la page, sans passer dans un mode 'edit code' ou autre, directement dans la page de saisie de notre éditeur favori.

Donc, pour afficher les tags sans qu'ils soient interprétés, j'utilise la technique utilisée sur le site du créateur, à savoir les mettre en gras, ce que nous ne ferons plus quand nous les utiliserons en réel. Maintenant, un premier exemple de tag:

{codecitation class="brush: vb; gutter: true;" width="500px"}

le code ici

{codecitation}

et c'est tout, le code est formaté. Première ligne, le tag d'ouverture, et quelques uns de ses paramètres, qu'on verra tout de suite après. Dernière ligne, le tag de fermeture, simplement.

Allons-y pour les paramètres de la partie class:

brush:vb -> on utilise un code vb, le formatage sera en fonction. Les autres codes peuvent être: js ou javascript, php, html, xml, et plein d'autres

gutter:true -> afficher ou non (false) les numéros de ligne

width="500px" -> si vous souhaitez limiter la largeur de l'affichage du code source, peut être utile sur certains templates non adaptés.

Voilà pour les paramètres de base.

Maintenant, amusons-nous un peu avec certains paramètres de la partie class vraiment top ahahah:

D'abord, celui que je préfère, le coup de foudre: html-script: true (ou ne pas le mettre pour avoir false par défaut)

Avec ça, vous allez pouvoir mixer du php et du html, par exemple. Pour ceux qui font du dev php, ils voient bien à quoi ça peut servir, et je donnerai un exemple ensuite.

Vous avez peut-être remarqué qu'en utilisant cet outil, le code était formaté, et une barre d'outils apparaissait en haut à droite du code. Pour activer ou désactiver l'affichage de cette barre d'outils: toolbar:true ou false

Pour ne pas mettre à la ligne les lignes trop longues, et vice et versa: wrap-lines:true ou false

Pour que le code soit condensé ou non (collapse en anglais), utiliser: collapse:true ou false

Enfin, pour conserver l'indentation du code (JCE enlève les espaces etc) il faut paramétrer JCE comme ceci: dans le backend Joomla, configuration de JCE, cadre Nettoyage du code, mettre Nettoyage HTML à OUI, et Type d'encodage à Nommé.

Voilà, beaucoup d'autres possibilités expliquées sur le site original, pour les plus curieux ou les plus exigeants.

Nous allons maintenant voir quelques exemples:

D'abord, un peu de php, le tag d'ouverture avec ses paramètres

{codecitation class="brush: php; gutter: true; tab-size: 1; toolbar: true; wrap-lines:false; first-line:0" width="700px"} on voit la numérotation des lignes, la barre d'outils, et les lignes longues ne sont pas mises à la ligne. tab-size permet d'indiquer qu'on souhaite avoir 1 espace pour une tabulation (par défaut 4) first-line:0 signifie qu'on souhaite commencer la numérotation des lignes à 0 (on peut mettre ce que l'on veut, défaut=1)


	$Nom_Fic = '/super-grand-nom-de-fichier-pour-tester-le-no-wrap/super-grand-nom-de-fichier-pour-tester-le-no-wrap/fichier.log'

	  $TableauLignes = array();   $i = 0;   $handle = @fopen($Nom_Fic, "rb");   if( $handle == false)   {   // tentative d'ouverture compressée @gzopen   $rep_log = 'logs-'.$mois_fichier.'-'.$annee_fichier;   $Nom_Fic_gz = str_replace('osl', $rep_log, $Nom_Fic);   $Nom_Fic_gz .= '.gz';   $handle = @gzopen($Nom_Fic_gz, "rb");   if( $handle == false)   {   $Nom_Fic = str_replace($pass, '*******', $Nom_Fic);   $Nom_Fic_gz = str_replace($pass, '*******', $Nom_Fic_gz);   echo 'Erreur à l\'ouverture du fichier log <br />';   echo 'fichier cherché:<br />';   echo $Nom_Fic;   echo '<br />';   echo 'puis: ';   echo '<br />';   echo $Nom_Fic_gz;   return;   }   }   while (!feof($handle))   {   $ligne_fic = fgets($handle, 4096);   $couleur = Teste_Ligne($ligne_fic);   if($couleur)    {   $TableauLignes[$i] = $ligne_fic.'"'.$couleur;   $i++;   }   }   fclose ( $handle ); 

 

Maintenant, un peu de javascript, avec d'autres paramètres:

{codecitation class="brush: js; gutter: true; tab-size: 1; toolbar: false; wrap-lines:true; highlight: [4, 7, 12]; font-size: '150%'"}

En gras les changements, avec deux nouveaux paramètres: highlight, qui permet de mettre en valeur une ligne en passant un chiffre après les deux-points, ou plusieurs comme ici, font-size, qui permet de définir une taille de police différente. En fait, cette option n'est pas supportée par codecitation, voir paramètres supportés pour plus d'infos. pour le wrap-line, j'aurais pu ne pas le mettre car l'option par défaut est true.


	/*****************************************************************************/ 

	var Inclus_Css_Ajax = function() //event

	{   var source_css = '';   $(document.html).getElements('link').each(function(item)   

	{   source_css = item.href;   // si pas déjà remplacé:  

	if(source_css.search('_ajax.tpl.css') == -1)   {   // si trouve la flypage la remplacer:  

	if(source_css.search('flypage')!= -1)   {   item.set('href', source_css.replace('.tpl.css','_ajax.tpl.css'));   }   }   }); }

	/*****************************************************************************/

	

 

Enfin, un mix php/html, mon favori:

{codecitation class="brush: php; html-script: true; tab-size: 1; toolbar: false; collapse: true"}

collapse: true, pour voir un peu ce que ça donne... D'ailleurs, ça ne fonctionne pas, on devrait avoir une petite icone pour expandre, mais elle n'y est pas, donc pour le moment je remets collapse à false... la numérotation des lignes commence à 1 par défaut et est en place par défaut, donc n'apparait pas dans les paramètres. html-script: true, pour indiquer que le code suivant contiendra et du php (brush: php) et de l'html, ce qui arrive souvent lorsqu'on fait un peu de dev pour un site en php.

Enfin, j'enlève la barre d'outils.


	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-fr" lang="fr-fr">   <head>   <meta http-equiv="content-type" content="text/html; charset=utf-8" />   <meta name="robots" content="index, follow" />   <meta name="keywords" content="analyse fichiers log ovh" />   <meta name="description" content="Outil d'analyse simple des fichiers logs d'ovh pour voir les tentatives d'attaques et le résultat du blocage de htaccess" />   <title>Analyse simple de logs OVH</title>   <link rel="stylesheet" href="/logs.css" type="text/css" />   <script type="text/javascript" src="/mootools_1_22.js"></script>   <script type="text/javascript" src="/logs.js"></script>   </head>   <body>   <h1>Analyse les attaques dans les logs OVH</h1>   <div id="formulaire">   <form id="myForm" action="affiche_logs.php" method="post">   <div>   <div class="titre">   <span>Nom du site:</span>   <select name="nom_site">   <?php   $fichier = @fopen("sites.txt", "rb");   if($fichier)   {   $i=0;   while (!feof($fichier))   {   $ligne = trim(fgets($fichier, 1024));   if ($ligne != '')   {   //echo $ligne;   ?>   <option value="<?php echo $ligne;?>"/><?php echo $ligne;?>   <?php   $i++;   }   }   ?>     <?php   fclose ( $fichier );   }   ?>   </select>   </div>   <div class="titre">   <span>NickHandle:</span>   <input type="text" name="nick_handle" value="niclhandle-ovh" />   </div>   <div class="titre">   <span>Mot de passe:</span>   <input type="password" name="pass" value="" />   </div>   <div class="titre">   <span>date:</span>   Jour(xx): <input type="text" name="jour_fichier" class= "date" value="<?php echo date('d');?>" />     Mois (xx): <input type="text" name="mois_fichier" class= "date" value="<?php echo date('m');?>" />   Année (xxxx): <input type="text" name="annee_fichier" class= "date" value="<?php echo date('Y');?>" />   </div>   </div>   <input type="submit" name="button" id="submitter" title="Chercher..." alt="Chercher..." value="Chercher..." />  </form>   </div>   <div id="affiche_logs">   </div>   </body> </html> 

Un dernier exemple avec une simple ligne de code:

{codecitation class="brush: php; html-script: true; light: true; highlight: 1"}

light: true, pour désactiver en une fois la numérotation et la barre d'outils, pratique lorsqu'on ne veut montrer en exemple qu'une seule ligne de code, par exemple. J'en profite pour mettre en valeur la seule ligne (numérotation désactivée à l'affichage par l'option light, mais elle commence quand-même par défaut à 1) avec highlight (pour le moment je n'ai pas encore changé la couleur de mise en valeur, mais ça va venir...)


	  <link rel="icon" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/favicon.png" type="image/png" />

	

Modifier les couleurs par défaut:

il existe une option pour rajouter une classe, class-name: 'nom_de_la_classe_css' mais je ne vais pas l'utiliser.

J'ai décidé de chercher un peu quel était le fichier css appelé par défaut, et je l'ai trouvé: /plugins/content/codecitation/styles/shThemeDefault.css

C'est celui-là que je vais modifier directement, pour remplacer la couleur de fond des lignes mises en évidence, et la barre droite de la numérotation des lignes, passant d'un vert... à un orange clair plus adapté à mon template actuel et temporaire. voilà les modifs que j'ai faites:


	/* Highlighed line number */ .syntaxhighlighter .line.highlighted .number {  background-color: #FEDA9A !important; /*6CE26C*/  color: black !important; } /* Highlighed line */ .syntaxhighlighter .line.highlighted.alt1 .content, .syntaxhighlighter .line.highlighted.alt2 .content {  background-color: #FEDA9A !important; /*6CE26C*/ }

	/* Add border to the lines */ .syntaxhighlighter .line .content {  border-left: 3px solid #FEDA9A !important; /*6CE26C*/  color: #000 !important; } .syntaxhighlighter .ruler {  color: silver !important;  background-color: #F8F8F8 !important;  border-left: 3px solid #FEDA9A !important; /*6CE26C*/ } 

 

Conclusions:

Un seul petit défaut, la prévisualisation dans le backend joomla ne montre pas la mise en forme du code.

Rajoutons au passage que JCE ou JoomlaFCK que j'utilise maintenant semblent mal fonctionner sur le code php qui est parfois enlevé carrément, parfois remplacé par une icône, et parfois pas touché, malgré les paramètres par défaut qui disent que je peux utiliser du php dans mes articles, à suivre et à tester donc.

 

Après avoir conduit de nombreux tests, j'en suis arrivé à la conclusion qu'il y avait une sorte de conflit entre toutes ces surcouches au texte.

J'ai donc étudié avec attention les différentes parties de ces plugin, pour finir par en développer un moi-même qui fait ce que je souhaite et comme je le souhaite.

Depuis, j'ai abandonné totalement CodeCitation qui générait trop de problèmes comme je l'utilisais, et je n'utilise que mon nouveau plugin.

Toutes les infos concernant ce plugin se trouvent ici

Et je conseille vivement à ceux qui sont intéressés par ces solutions de formatage d'aller y jeter un oeil, les problèmes rencontrés ont depuis complètement disparu.