<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <title>Artisan Numérique</title>
  <link rel="alternate" type="text/html" href="http://artisan.karma-lab.net/node/1539"/>
  <link rel="self" type="application/atom+xml" href="http://artisan.karma-lab.net/node/1539/atom/feed"/>
  <id>http://artisan.karma-lab.net/node/1539/atom/feed</id>
  <updated>2008-11-13T13:14:30+01:00</updated>
  <entry>
    <title>Module &#039;Code Highlighter&#039; pour Drupal</title>
    <link rel="alternate" type="text/html" href="http://artisan.karma-lab.net/node/1539" />
    <id>http://artisan.karma-lab.net/node/1539</id>
    <published>2008-05-16T00:52:05+02:00</published>
    <updated>2008-11-13T13:14:30+01:00</updated>
    <author>
      <name>Ulhume</name>
    </author>
    <category term="Drupal" />
    <category term="Artisanat" />
    <category term="drupalfr.org" />
    <category term="Planet Libre" />
    <summary type="html"><![CDATA[<p>
   Ce module est celui utilisé sur le site pour colorier le code source. Il utilise en interne l'excellent moteur de colorisation <a class='external' target='_blank' href='http://qbnz.com/highlighter/' >GeSHI</a>. 
</p>
    ]]></summary>
    <content type="html"><![CDATA[<p>
   Ce module est celui utilisé sur le site pour colorier le code source. Il utilise en interne l'excellent moteur de colorisation <a class='external' target='_blank' href='http://qbnz.com/highlighter/' >GeSHI</a>. 
</p>
<!--break-->
<p>
  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. 
</p>
<div class='inline-box note'>
  Pour les utilisateurs de DotClear2, Osku a développé un version équivalent à ce module que vous pouvez trouver <a class='external' target='_blank' href='http://www.sakeco.net/blog/pre2ol' >ici</a>.
</div>

	<a name='chapter_1'></a>
  <h2>Mode \"code\"</h2>
	
<p>  
   Il s'agit du mode classique de colorisation de code. On l'obtient en encadrant le fragment par une balise  <kbd>&lt;code type="un langage" caption="un titre"&gt;</kbd>. L'attribut <kbd>caption</kbd> est optionnel et permet d'ajouter un titre au fragment de code. L'attribut <kbd>type</kbd> 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 :

  <div class='code-block code-block-fragment'>
  <div class='container'>
  <span class="coMULTI">/**<br />
&nbsp;* Prepare the texte for being displayed :<br />
&nbsp;* &nbsp; &nbsp;- remove extra left margin<br />
&nbsp;* &nbsp; &nbsp;- replace special characters<br />
&nbsp;*<br />
&nbsp;*/</span><br />
<a target="blank" href="http://www.php.net/function"><span class="kw2">function</span></a> _code_highlighter_prepare_text<span class="br0">&#40;</span><span class="re0">$text</span><span class="br0">&#41;</span> <span class="br0">&#123;</span><br />
&nbsp; <span class="co1">// Calculating minimum left margin</span><br />
&nbsp; <span class="re0">$test</span><span class="sy0">=</span><a target="blank" href="http://www.php.net/str_replace"><span class="kw3">str_replace</span></a><span class="br0">&#40;</span><span class="st0">&quot;<span class="es0">\t</span>&quot;</span><span class="sy0">,</span> <a target="blank" href="http://www.php.net/str_repeat"><span class="kw3">str_repeat</span></a><span class="br0">&#40;</span><span class="st0">&quot; &quot;</span><span class="sy0">,</span>code_highlighter_tabulation_size<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#41;</span><span class="sy0">,</span><span class="re0">$test</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; <span class="re0">$lines</span><span class="sy0">=</span> <a target="blank" href="http://www.php.net/explode"><span class="kw3">explode</span></a><span class="br0">&#40;</span><span class="st0">&quot;<span class="es0">\n</span>&quot;</span><span class="sy0">,</span> <span class="re0">$text</span><span class="br0">&#41;</span><span class="sy0">;</span><br />
&nbsp; <span class="re0">$ident</span><span class="sy0">=</span> <span class="nu0">255</span><span class="sy0">;</span><br />
&nbsp; <a target="blank" href="http://www.php.net/foreach"><span class="kw1">foreach</span></a> <span class="br0">&#40;</span><span class="re0">$lines</span> <a target="blank" href="http://www.php.net/as"><span class="kw1">as</span></a> <span class="re0">$line</span><span class="br0">&#41;</span> <span class="br0">&#123;</span><br />
&nbsp; &nbsp; <span class="re0">$iPos</span><span class="sy0">=</span> <span class="nu0">0</span><span class="sy0">;</span><br />
&nbsp; &nbsp; <a target="blank" href="http://www.php.net/if"><span class="kw1">if</span></a> <span class="br0">&#40;</span><a target="blank" href="http://www.php.net/strlen"><span class="kw3">strlen</span></a><span class="br0">&#40;</span><a target="blank" href="http://www.php.net/trim"><span class="kw3">trim</span></a><span class="br0">&#40;</span><span class="re0">$line</span><span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="sy0">!=</span> <span class="nu0">0</span><span class="br0">&#41;</span> <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; <a target="blank" href="http://www.php.net/while"><span class="kw1">while</span></a> <span class="br0">&#40;</span><span class="br0">&#40;</span><span class="br0">&#40;</span><span class="re0">$char</span><span class="sy0">=</span> <a target="blank" href="http://www.php.net/substr"><span class="kw3">substr</span></a><span class="br0">&#40;</span><span class="re0">$line</span><span class="sy0">,</span> <span class="re0">$iPos</span><span class="sy0">,</span> <span class="nu0">1</span><span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="sy0">==</span> <span class="st0">&quot; &quot;</span><span class="br0">&#41;</span> <span class="sy0">&amp;&amp;</span> <span class="br0">&#40;</span><span class="re0">$iPos</span> <span class="sy0">&lt;</span> <a target="blank" href="http://www.php.net/strlen"><span class="kw3">strlen</span></a><span class="br0">&#40;</span><span class="re0">$line</span><span class="br0">&#41;</span><span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="re0">$iPos</span><span class="sy0">++;</span><br />
&nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; &nbsp; <a target="blank" href="http://www.php.net/if"><span class="kw1">if</span></a> <span class="br0">&#40;</span><span class="re0">$iPos</span> <span class="sy0">&lt;</span> <span class="re0">$ident</span><span class="br0">&#41;</span> <span class="br0">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; <span class="re0">$ident</span><span class="sy0">=</span> <span class="re0">$iPos</span><span class="sy0">;</span><br />
&nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; &nbsp; <span class="br0">&#125;</span><br />
&nbsp; <span class="br0">&#125;</span><br />
<span class="br0">&#125;</span>
  </div>
  <div class='caption'>fonction _code_highlighter_prepare_text</div>
  </div>
</p>

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

  <div class='code-block code-block-code'>
  <div class='container'>
  <ol><li class="li1"><div class="de1"><span class="co1"># vérifie que la machine cible est allumée et initialize la sauvegarde</span></div></li>
<li class="li1"><div class="de1"><span class="kw2">sub</span> check_host <span class="br0">&#123;</span></div></li>
<li class="li1"><div class="de1">&nbsp; <span class="co1"># analyse des arguments</span></div></li>
<li class="li1"><div class="de1">&nbsp; <span class="re0">%host</span> <span class="sy0">=</span> <span class="br0">&#40;</span></div></li>
<li class="li1"><div class="de1">&nbsp; &nbsp; fs &nbsp; &nbsp; &nbsp; &nbsp;<span class="sy0">=&gt;</span> <span class="st0">&quot;ssh&quot;</span><span class="sy0">,</span></div></li>
<li class="li1"><div class="de1">&nbsp; &nbsp; method &nbsp; &nbsp;<span class="sy0">=&gt;</span> <span class="st0">&quot;rdiff&quot;</span><span class="sy0">,</span></div></li>
<li class="li1"><div class="de1">&nbsp; &nbsp; name &nbsp; &nbsp; &nbsp;<span class="sy0">=&gt;</span> <a target="blank" href="http://perldoc.perl.org/functions/undef.html"><span class="kw3">undef</span></a><span class="sy0">,</span></div></li>
<li class="li1"><div class="de1">&nbsp; &nbsp; address &nbsp; <span class="sy0">=&gt;</span> <a target="blank" href="http://perldoc.perl.org/functions/undef.html"><span class="kw3">undef</span></a><span class="sy0">,</span></div></li>
<li class="li1"><div class="de1">&nbsp; &nbsp; path &nbsp; &nbsp; &nbsp;<span class="sy0">=&gt;</span> <a target="blank" href="http://perldoc.perl.org/functions/undef.html"><span class="kw3">undef</span></a><span class="sy0">,</span></div></li>
<li class="li1"><div class="de1">&nbsp; &nbsp; root &nbsp; &nbsp; &nbsp;<span class="sy0">=&gt;</span> <span class="st0">&quot;&quot;</span><span class="sy0">,</span></div></li>
<li class="li1"><div class="de1">&nbsp; &nbsp; <span class="co5">@_</span></div></li>
<li class="li1"><div class="de1">&nbsp; <span class="br0">&#41;</span><span class="sy0">;</span></div></li>
<li class="li1"><div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span><span class="sy0">!</span><a target="blank" href="http://perldoc.perl.org/functions/defined.html"><span class="kw3">defined</span></a> <span class="re0">$host</span><span class="br0">&#123;</span>address<span class="br0">&#125;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li>
<li class="li1"><div class="de1">&nbsp; &nbsp; <span class="re0">$host</span><span class="br0">&#123;</span>address<span class="br0">&#125;</span><span class="sy0">=</span><span class="re0">$host</span><span class="br0">&#123;</span>name<span class="br0">&#125;</span><span class="sy0">;</span></div></li>
<li class="li1"><div class="de1">&nbsp; <span class="br0">&#125;</span></div></li>
<li class="li1"><div class="de1">&nbsp; <span class="re0">$host</span><span class="br0">&#123;</span>path<span class="br0">&#125;</span><span class="sy0">=</span><span class="st0">&quot;$storage_path/$host{name}&quot;</span><span class="sy0">;</span></div></li>
<li class="li1"><div class="de1">&nbsp; mkpath <span class="br0">&#40;</span><span class="re0">$host</span><span class="br0">&#123;</span>path<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li>
<li class="li1"><div class="de1">&nbsp;</div></li>
<li class="li1"><div class="de1">&nbsp; <span class="co1"># on vérifie que le host est bien UP</span></div></li>
<li class="li1"><div class="de1">&nbsp; <span class="kw1">my</span> <span class="re0">$ping</span> <span class="sy0">=</span> Net<span class="sy0">::</span><span class="me2">Ping</span><span class="sy0">-&gt;</span><span class="me1">new</span><span class="br0">&#40;</span><span class="st0">&quot;icmp&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li>
<li class="li1"><div class="de1">&nbsp; <span class="kw1">my</span> <span class="re0">$is_up</span> <span class="sy0">=</span> <span class="re0">$ping</span><span class="sy0">-&gt;</span><span class="me1">ping</span><span class="br0">&#40;</span><span class="re0">$host</span><span class="br0">&#123;</span>address<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li>
<li class="li1"><div class="de1">&nbsp; <span class="re0">$ping</span><span class="sy0">-&gt;</span><span class="me1">close</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li>
<li class="li1"><div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span><span class="sy0">!</span><span class="re0">$is_up</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li>
<li class="li1"><div class="de1">&nbsp; &nbsp; <span class="co1"># le host est down, rien à faire de plus</span></div></li>
<li class="li1"><div class="de1">&nbsp; &nbsp; trace_debug<span class="br0">&#40;</span><span class="st0">&quot;'$host{name}' is down, leaving.&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li>
<li class="li1"><div class="de1">&nbsp; &nbsp; <a target="blank" href="http://perldoc.perl.org/functions/return.html"><span class="kw3">return</span></a> <span class="nu0">0</span><span class="sy0">;</span></div></li>
<li class="li1"><div class="de1">&nbsp; <span class="br0">&#125;</span></div></li>
<li class="li1"><div class="de1">&nbsp;</div></li>
<li class="li1"><div class="de1">&nbsp; <a target="blank" href="http://perldoc.perl.org/functions/return.html"><span class="kw3">return</span></a> <span class="nu0">1</span><span class="sy0">;</span></div></li>
<li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li></ol>
  </div>
  <div class='caption'>Vérification de l&#039;état de la machine</div>
  </div>
</p>

<p>
  Je n'avais pas pensé à l'origine que ce code puisse intéresser certains. Il est donc tout vilain à l'intérieur <img src="http://artisan.karma-lab.net/sites/all/modules/contrib/smileys/packs/crystal/wink2.gif" title="Wink" alt="Wink" class="smiley-content"/> Dés que j'aurais le temps, j'y mettrais un grand coup de propre. 
</p>


	<a name='chapter_2'></a>
  <h2>Mode \"traces\"</h2>
	
<p>  
   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, <a class='external' target='_blank' href='http://groovy.codehaus.org' >Groovy</a>, etc...
</p>
<p>
   On obtient se mode en encadrant le fragment par une balise  <kbd>&lt;traces type="un langage" caption="un titre"&gt;</kbd>. L'attribut <kbd>caption</kbd> est optionnel et permet d'ajouter un titre au fragment de code. L'attribut <kbd>type</kbd> reçoit le langage à utiliser pour le fragment. Il s'agit là ausi de n'importe quel langage reconnu par GeSHI. 
</p>
<p>
  Jusque là c'est très proche de <kbd>code</kbd>. La différence se situe au niveau du traitement effectué sur le fragment. Le système l'interprète ligne à ligne. Lorsqu'un motif <kbd>$$</kbd> 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 <kbd>type</kbd> et sera donc colorisée par GeSHI. Si la ligne ne contient aucun motif <kbd>$$</kbd>, 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 <kbd>$$</kbd> juste avant, en tout début de ligne (invite vide). Ce qui nous donne :
  <ul>
    <li><kbd>gaston$$$ ls -la</kbd> : une invite (gaston$) et une commande (ls -la)</li>
    <li><kbd>root#$$ useradd gaston</kbd> : une invite (root#) et une commande (useradd)</li>
    <li><kbd>$$# un commentaire</kbd></li>
    <li><kbd>Un résultat....</kbd></li>
  </ul>
</p>
<p>
  L'avantage de l'approche <kbd>$$</kbd> 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 :
  
  <div class='code-block code-block-traces'>
  <div class='container'>
  <div class='co0'># ceci est un commentaire</div><div class='command'><span class='prompt'>gaston$</span>ftp mon_server</div><div class='result'>Welcome the Gaston FTP Server</div><div class='command'><span class='prompt'>ftp></span>ls</div><div class='result'>readme.txt</div><div class='command'><span class='prompt'>ftp></span>get readme.txt</div><div class='result'>file received.</div><div class='result'>ftp>quit</div><div class='command'><span class='prompt'>gastion$</span></div><div class='command'><span class='prompt'>gastion$</span><span class='cursor'>&nbsp;</span></div>
  </div>
  <div class='caption'>session FTP</div>
  </div>
</p>   
<p>
  Ou encore
  
  <div class='code-block code-block-traces'>
  <div class='container'>
  <div class='command'><span class='prompt'>gaston$</span>groovy</div><div class='command'><span class='prompt'>groovy></span>for (int i=0; i < 1; i++) { println ("Hello World!!"); }</div><div class='result'>Hello World!!!</div><div class='result'>Hello World!!!</div><div class='command'><span class='prompt'>groovy></span><span class='cursor'>&nbsp;</span></div>
  </div>
  <div class='caption'>Groovy Hello World</div>
  </div>
</p>


	<a name='chapter_3'></a>
  <h2>Bascule texte simple / texte colorisé</h2>
	
<p>
  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. 
</p>

    ]]></content>
  </entry>
</feed>
