Publier du code avec SyntaxHighlighter sur Blogger

L’installation se fait en 4 étapes :

1. On télécharge la version que l’on veut ici (v1.5.1) ou ici (v2.0.nnn)
2. On extrait le contenu pour héberger les fichiers sur un site ou en utilisant l’un des liens suivant :
   • http://alexgorbatchev.com/pub/sh/1.5.1/
   • http://alexgorbatchev.com/pub/sh/2.0.320/
3. On se connecte sur son bloque et l’on vas dans (Tableau de bord / Mise en page / Modifier le code HTML) pour modifier le modèle du blogue en ajoutant quelques lignes en fonction de la version. On ne se casse pas la tête, il faut aller à la fin du modèle et juste après la ligne suivante “<!-- end outer-wrapper -- >” on insère le code suivant :

• Version 1.5.1

<link href='http://alexgorbatchev.com/pub/sh/1.5.1/styles/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>

<script language='javascript' src='http://alexgorbatchev.com/pub/sh/1.5.1/scripts/shCore.js'/>
<script language='javascript' src='http://alexgorbatchev.com/pub/sh/1.5.1/scripts/shBrushJScript.js'/>
<script language='javascript' src='http://alexgorbatchev.com/pub/sh/1.5.1/scripts/shBrushCSharp.js'/>

<script language='javascript'>
    dp.SyntaxHighlighter.BloggerMode();
    dp.SyntaxHighlighter.HighlightAll('code');
</script>

• Version 2.0.nnn

<link href='http://alexgorbatchev.com/pub/sh/2.0.320/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<link href='http://alexgorbatchev.com/pub/sh/2.0.320/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> 

<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shCore.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushCSharp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushJScript.js' type='text/javascript'></script> 

<script type='text/javascript'> 
    SyntaxHighlighter.config.bloggerMode = true
    SyntaxHighlighter.all();
</script>

Après plusieurs heures de recherche et d’essai (merci au post de Burca Victor Ciprian). Le truc, pour faire fonctionner SyntaxHighlighter correctement avec Blogger, c’est la ligne suivante qui doit être ajouter dans modèle du blogue (Ligne déjà présente dans les scripts précédents) :

• Pour la version 1.5.1 :  dp.SyntaxHighlighter.BloggerMode();
• Pour la version 2.0.nnn :   SyntaxHighlighter.config.bloggerMode = true

Les gens qui ne sont pas avec Blogger, doivent retirer cette ligne.

Si on ne met pas ces lignes, on obtient le cas suivant avec un code incompréhensible et plein de balise <BR />. Exemple :

  4.  Dernière phase, il ne reste plus qu’à formater le code que l’on veux publier avec les balises suivantes :

• Pour la v1.5.1 :

  <pre name="code" class="[non du langage]">
  [ici votre code]
  </pre>

• Pour la v2.0.nnn :

  <pre class="brush: [nom du langage];"
  [ici votre code]
  </pre>

Il faut remplacer [nom du langage] par le nom du langage (exemple : CSharp, js, etc…) et [ici votre code] par le morceau de code que vous voulez présenter. N’oublier pas d’ajouter le lien du langage que vous voulez afficher dans le modèle de votre blogue.

Voila, bon blogue à vous :).