Blogger du code avec blogger.com

Pas de tutoriel aujourd'hui

Suite à de nombreux déboires pour essayer de trouver une solution efficace pour blogger du code, j'ai fini par passer une bonne partie de la journée à coder un parser HTML pour améliorer mon optimisateur HTML.

Si vous avez déjà essayé de blogger du code, vous connaissez sans doute le problème... et avec les Generics du C# c'est encore pire (il ressemblent à des balises HTML).

C'est maintenant résolu, grâce au script SyntaxHighlighter couplé à l'optimisateur HTML

Blogger du code : recette

Configurer SyntaxHighlighter

La première bonne nouvelle c'est qu'on peut directement faire des liens sur les scripts existants.
Pas de problématique d'hébergement.

1) Rajouter dans l'entête de votre template HTML, la feuille CSS suivante :

<link href='http://howard.ross.work.googlepages.com/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>

2) Rajouter, tout en bas de votre page, avant la fermeture de votre balise body, le script suivant :

<script language="javascript" src="http://howard.ross.work.googlepages.com/shCore.js"></script>
<script language="javascript" src="http://howard.ross.work.googlepages.com/shBrushCSharp.js"></script>
<script language="javascript" src="http://howard.ross.work.googlepages.com/shBrushXml.js"></script>
<script language="javascript" src="http://howard.ross.work.googlepages.com/shBrushSql.js"></script>
<script language="javascript" src="http://howard.ross.work.googlepages.com/shBrushJScript.js"></script>
<script language="javascript">
    dp.SyntaxHighlighter.ClipboardSwf = 'http://howard.ross.work.googlepages.com/clipboard.swf';
    dp.SyntaxHighlighter.BloggerMode();  dp.SyntaxHighlighter.HighlightAll('code');
</script>

Utiliser SyntaxHighlighter

Vous pouvez dès maintenant utiliser SyntaxHightlighter.
Pour cela il suffit de faire une balise pre (texte préformaté) comme suit :

<pre name="code" class="c#">
using System;

public class A<T>
{
    public A(string text)
    {
        this._text = text;
    }
    private string _text;
}</pre>

Vous pouvez utiliser ce système pour différents langages en changeant simplement l'attribut class de la balise pre.
Les scripts que j'ai donné en exemple permettent le classes suivantes :

• c#
• xml
• js
• sql

Le seul inconvénient notable c'est qu'il faut terminer la balise pre sur la dernière ligne de code, sinon SyntaxHighlighter rajoute un ligne de code vide.

Optimisation HTML : la cerise sur le gâteau

http://www.blogger.com est un moteur de blog intéressant.
Néanmoins, je n'utilise pas son éditeur, trop limité à mon goût, j'écris directement en HTML.
Du coup, je rencontre quelques soucis avec certains caractères, notamment ceux des Generics du C#.

Pour contourner ça, intervient l'optimisateur HTML, qui va :

• Réduire la taille du HTML en enlevant les espaces inutiles
• Améliorer le HTML en remplaçant les accents par les équivalents HTML (´, etc.), ce qui est également une best-practice pour le référencement
• Laisser le code en paix en ne touchant pas au contenu de la balise pre, à l'exception des > et < qui vont se transformer en &gt; &gt;

3) Copier l'intégralité de l'article en HTML dans la textarea 'Entrez votre HTML'
Cliquer sur 'Optimize' et récupérer le contenu optimisé

Demain nous allons créer notre propre MembershipProvider, en utilisant notre classe User