samedi 6 octobre 2012

Coloration syntaxique de code avec SyntaxHighlighter 3 dans Blogger

Tous les "développeurs-bloggers" ont besoin d'afficher des extraits de code de leur langage préféré.
Et du code avec coloration syntaxique c'est tout de suite beaucoup plus sympa pour les lecteurs.

N'échappant pas à la règle, j'entreprends aujourd'hui d'utiliser le célèbre SyntaxHighlighter (v3) d'Alex Gorbatchev (http://alexgorbatchev.com/SyntaxHighlighter/) dans Blogger. Et comme ça peut être utile à d'autres développeurs, voici la marche à suivre étape par étape...

1) A savoir

SyntaxHighlighter est uniquement constitué de styles CSS et de JavaScript (le petit bout de Flash a été supprimé dans la version 3). Il suffit donc d'insérer les tags qui font référence aux différents fichiers CSS et JS au bon endroit et le tour est joué.
Dans Blogger l'endroit en question c'est le "Template" (ou "Modèle") du blog.

2) Faire une sauvegarde du template

On ne sait jamais... Il vaut mieux être prudent
  • Aller sur la page d'administration du blog
  • Sélectionner "Modèle"
  • puis "Sauvegarde/Restauration" 
  • et "Télécharger le modèle complet"
Il s'agit d'un fichier XML avec un nom du genre "template-xxxx.xml" qu'on gardera au chaud sur le disque du poste de travail (au cas où)...

3) Modifier le "Template" ( ou "Modèle" en français )
  • Cliquer sur "Modifier le code HTML"
  • Un message d'avertissement s'affiche mettant en garde sur les conséquences possibles de cette modification, considérant qu'on sait ce qu'on fait il n'y a plus qu'à cliquer sur "Traiter"
  • Le code HTML s'affiche (avec la structure d'un page HTML standard)
  • Il suffit d'insérer le code ci-dessous juste avant le tag fermant   </head>  
    (ce bloc de code contient uniquement les fichiers "shBrushXxx.js" pour les langages les plus courants, il en existe d'autres sur le site de référence)
<!-- Syntax Highlighter 3.0.83 START -->
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script language='javascript' type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>
<!-- Syntax Highlighter 3.0.83 END -->
  • Enregistrer le modèle
  • "Fermer"
  • Afficher le blog
Si tout c'est bien passé le blog doit s'afficher normalement (aucune différence)
Pour vérifier que l'ajout a bien été pris en compte par Blogger afficher le code source de la page (qui doit contenir notre ajout)

Avec certains navigateurs (dont Google Chrome) la colonne qui affiche le numéro de ligne ne contient qu'un seul caractère et provoque l'affichage de lignes vides.
Pour corriger ce problème ajouter le code suivant :
<style>
    .syntaxhighlighter table td.gutter .line {
       padding: 0 !important;
    }
</style>

Blogger est maintenant prêt à accueillir du code qui sera colorisé en fonction du type de langage.

4) Utilisation 

L'incrustation de code peut se faire de deux façons ( avec les tags <pre> ou <script> )

<pre class="brush: js">
Les lignes de code

</pre>


<script type="syntaxhighlighter" class="brush: js"><![CDATA[
  Lignes de code
]]></script>

"brush" désigne la nature du langage.

Pour plus de détails : http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html

Pour saisir ces tags il faudra donc passer en mode d'édition HTML dans l'éditeur de Blogger
Le rendu n'est pas visible en mode édition, le mode "Aperçu" permet de voir ce que donnera l'affichage mais ne permet pas de tester les actions de la souris (sélection, copie, etc...)


5) Exemples

Exemple de code Java  ( brush:java )
public void foo() {
    int i = 0 ;
}

Exemple de code SQL  ( brush:sql )
select * from mytable
where code > 20 




1 commentaire:

  1. Avec hébergement de Syntax Highlighter sur Google Sites :
    http://glamhacker.blogspot.fr/2011/09/adding-syntax-highlighter-to-blogger_08.html

    RépondreSupprimer