NanoBlogger francophone [wiki]

• Accueil
• Installer
• Configurer
• Astuces
• Communauté
• Plan du wiki
• Manuel
• À propos

Sommaire

NB : Une solution alternative au Javascript existe, Cf. Liens connexes en bas de cette page.

Présentation

Syntax Hilighter est issu de Google Code. Il permet d'apposer des couleurs sur les codes se trouvant entre les balises <pre></pre> d'un site.

Cela utilise la technologie javascript, ce qui apporte donc très peu de modifications à Nanoblogger pour être inclus.

Descente/Chargement de Syntax Highlighter

Sur le site officiel de Syntax Highlither, un fichier .rar est proposé. Cependant je n'ai pas réussi à en extraire les fichiers, donc j'ai opté pour la méthode svn qui requiert l'installation préalable du paquet subversion (exemple pour Debian) :

apt-get update && apt-get install subversion
svn checkout http://syntaxhighlighter.googlecode.com/svn/trunk/ syntaxhighlighter

Ceci crée un dossier syntaxhighlighter dans le répertoire courant.

Mise en place dans notre répertoire Nanoblogger, par exemple /home/olivier/public_html/

Syntax Highlighter a besoin principalement de deux dossiers :

• Scripts : contient tout les fichiers javascripts et le fichier swf nécessaire au traitement de nos codes
• Styles : contient l'apparence à appliquer sur les codes

Ce qui est déjà bien avec Nanoblogger, c'est qu'il contient déjà un dossier nommé styles il ne lui manque d'un répertoire pour accueillir les scripts. Créeons en donc un :

mkdir /home/olivier/public_html/js

Et copions les contenus qui vont bien :

cp ./syntaxhighlighter/Scripts/* /home/olivier/public_html/js/
cp ./syntaxhighlighter/Styles/SyntaxHighlighter.css /home/olivier/public_html/styles/

Normalement nous avons tout ce qu'il faut pour notre Nanoblogger, voyons du côté de nos templates.

Injection de code pour inclure Syntax Highlighter dans nos pages du Nanoblogger

Les codes à injecter sont au nombre de 2. Le premier est à mettre entre les balises HEAD et permet d'avoir une mise en forme du code affiché à l'écran, le second permet de traiter nos codes à afficher à l'utilisateur.

Code à ajouter entre les balises HEAD :

<link type="text/css" rel="stylesheet" href="${BASE_URL}styles/SyntaxHighlighter.css"></link>

Code à ajouter juste avant la balise </body> :

<script class="javascript" src="${BASE_URL}js/shCore.js"></script>
<script class="javascript" src="${BASE_URL}js/shBrushCSharp.js"></script>
<script class="javascript" src="${BASE_URL}js/shBrushPhp.js"></script>
<script class="javascript" src="${BASE_URL}js/shBrushJScript.js"></script>
<script class="javascript" src="${BASE_URL}js/shBrushJava.js"></script>
<script class="javascript" src="${BASE_URL}js/shBrushVb.js"></script>
<script class="javascript" src="${BASE_URL}js/shBrushSql.js"></script>
<script class="javascript" src="${BASE_URL}js/shBrushXml.js"></script>

<script class="javascript" src="${BASE_URL}js/shBrushDelphi.js"></script>
<script class="javascript" src="${BASE_URL}js/shBrushPython.js"></script>
<script class="javascript" src="${BASE_URL}js/shBrushRuby.js"></script>
<script class="javascript" src="${BASE_URL}js/shBrushCss.js"></script>
<script class="javascript" src="${BASE_URL}js/shBrushCpp.js"></script>
<script class="javascript" src="${BASE_URL}js/shBrushScala.js"></script>
<script class="javascript" src="${BASE_URL}js/shBrushGroovy.js"></script>
<script class="javascript" src="${BASE_URL}js/shBrushBash.js"></script>
<script class="javascript">
  if(window.isBloggerMode == true)
  dp.SyntaxHighlighter.BloggerMode();

  dp.SyntaxHighlighter.ClipboardSwf = '${BASE_URL}js/clipboard.swf';
  dp.SyntaxHighlighter.HighlightAll('code');
</script>

Ajoutez ces morceaux de codes dans tous les templates qui contiennent les balises HTML, chez moi voici les fichiers adéquats :

• ./templates/day_archive.htm
• ./templates/category_archive.htm
• ./templates/month_archive.htm
• ./templates/year_archive.htm
• ./templates/main_index.htm
• ./templates/categoryincarchive.htm
• ./templates/permalink.htm
• ./templates/makepage.htm

Faites désormais (code pour Nanoblogger-3.4 RC2) :

cd /home/olivier/public_html/
nb update all

Syntax Highlighter est donc installé dans votre Nanoblogger !

Quelle syntaxe utiliser pour que Syntax Highlighter fonctionne ?

Pour sur Syntax Highlighter fonctionne, il suffit d'utiliser le code suivant dans vos billets :

<pre name="code" class="nomDeMonLangageDeProgrammation">
</pre>

Un exemple pour illustrer ce code, avec du langage en Script Bash :

<pre name="code" class="bash">
for i in 0 1 2 3 
do
        echo $i
done
</pre>

Je vous en prie, testez ! Et remplissez nous tous vos jouebs/blogs avec de beaux codes en couleurs !

Liens connexes

Si le javascript vous fait peur ou que vous ne l'aimez pas, sachez qu'il existe une solution alternative à Syntax Highlighter, prévue pour Nanoblogger : Code plugin.