Publicité

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 += "&amp;";
    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>
 
 
 

Geshi 001Geshi 002Geshi 003Geshi 004Geshi 005


Vous avez aimé cet article ? Alors partagez-le avec vos amis en cliquant sur les boutons ci-dessous :


Commentaires

  • Aucun commentaire trouvé

Poster un commentaire en tant qu'invité

0

La pub ça rapporte pas grand chose, en plus ça vous laisse d'horribles cookies non comestibles, autrement appelé trackers. Ce cookie est utilisé par DoubleClick (Google Adsense). Vous avez tout le droit de ne pas en vouloir et donc quitter cet excellent blog. Dans le cas contraire, vous l'acceptez et vous poursuivez le surf en toute connaissance de cause (par ailleurs j'utilise piwik).