Coloration syntaxique avec Geshi et Joomla

Il y a quelque temps de cela, j'avais proposé un article sur : comment virer Mootools de Joomla. C'était histoire d'économiser environ 400 ko de JavaScript qui ne sont pas vraiment utiles. Enfin, pas vraiment utile sauf pour la coloration syntaxique de code avec HsHighligther sur GeekMPS. C'est vrai que ce module JavaScript est très efficace, ergonomique et joli.

Sous Joomla, il existe déjà la bibliothèque de coloration syntaxique Geshi, alors pourquoi ne pas l'utiliser. D'abord elle a l'avantage d'entrer dans le cache ce qui donne un affiche plus rapide des pages. Le tout petit souci de rien du tout est le nombre de langages gérés. Ce nombre est très réduit par Joomla. En effet, Joomla ne donne que 5 langages par défaut.

Utilisation

Tout d'abord il va falloir activer le plugin Geshi (Extensions → Gestion des plugins → Content - Code Hightlighter (GeSHi) et cochez la case Activer)

Ensuite la syntaxe d'utilisation est la suivante

<pre xml:lang="php">

<?php

echo "Hello World!"

?>

</pre>

0) utiliser le mode afficher la source

1) ouvrir une balise < pre >

2) appeler le langage souhaité, ici php avec la propriété xml:lang="php"

3) ATTENTION, remplacer les <  par &lt; et > par &gt;

On trouve les langages possibles dans le répertoire plugins/content/geshi/geshi/geshi . On s'aperçoit comme déjà dit, qu'il y en a très peu.

Ajouter des langages

On peut en ajouter autant de langages que l'on veut dans la mesure où il existe pour Geshi. Pour cela, on va aller sur le site de Geshi. On récupère la version la plus récente de l'archive. http://qbnz.com/highlighter/

http://sourceforge.net/projects/geshi/files/geshi/

Une fois dans l'archive, on se positionne dans le répertoire geshi/geshi.

On sélectionne les langages que l'on souhaite ajouter à notre Joomla (html5 ça me paraît pas mal) on fait extrait dans le répertoire plugins/content/geshi/geshi/geshi de notre installation joomla.

Exemples

Petit exemple JavaScript

<pre xml:lang="javascript">
Console.log('test') ;
function addParam(name,value) {
    if(useAmp == true)
        variables += "&";
    variables += escape(name) + "=" + escape(value)
    useAmp = true;
}
</pre>

Console.log('test') ;
function addParam(name,value) {
    if(useAmp == true)
        variables += "&";
    variables += escape(name) + "=" + escape(value)
    useAmp = true;
}

Exemple Html5

<pre xml:lang="html5">
<article>
<label for="hue">Colour <input type="range" min="0" max="360" value="0" id="hue"></label> <output id="target"></output>
<video id="video" muted loop autoplay>
<source src="/assets/remy-and-ellis2.mp4"></source>
<source src="/assets/remy-and-ellis2.webm"></source>
</video>
<canvas id="source"></canvas>
<p id="gum">getUserMeda either not supported or not allowed - so instead here's me and my son headbanging.</p>
</article>
</pre>

<article>
  <label for="hue">Colour <input type="range" min="0" max="360" value="0" id="hue"></label> <output id="target"></output>
    <video id="video" muted loop autoplay>
    <source src="/assets/remy-and-ellis2.mp4"></source>
    <source src="/assets/remy-and-ellis2.webm"></source>
  </video>
  <canvas id="source"></canvas>
  <p id="gum">getUserMeda either not supported or not allowed - so instead here's me and my son headbanging.</p>
</article>