mBerube.net
A journey to .Net

Intégration de SyntaxHighlighter dans BlogEngine.Net

vendredi, 2 octobre 2009 11:16 by mBerube
(Aussi disponible en: English)

J'étais en train de composer mon premier post vraiment technique (sur asp.net MVC) et j'ai réalisé que je n'avais pas de façon d'afficher correctement des bouts de code. Il est inadmissible pour un blogue de programmeur de ne pas avoir une telle fonctionnalité. Je suis donc parti à la recherche d'un outil et très vite, je suis tombé sur SyntaxHighlighter, un produit open-source écrit entièrement en javascript et très utilisé sur le net. La documentation est claire et l'installation semblait très simple. Ce fût un peu plus complexe que déclaré mais, au bout du compte, j'ai pu l'intégrer de façon satisfaisant dans BE.NET

Download SyntaxHighlighter

En se rendant sur le site "officiel", on peut télécharger la version 1.5. Par contre, en se rendant directement sur le site de l'auteur, on peut télécharger la nouvelle version 2.0. J'ai opté pour celle-là. Le package contient une série de css et de javascript nécessaires pour le fonctionnement de l'application. Pour obtenir le formattage, il suffit d'inclure le code dans un tag <PRE> avec la classe correspondant au langage à afficher. Ex :

<pre class="brush: html;">
<b>bold text</b>
</pre>

Les scripts fonctionnent très bien, c'est au moment l'inclure les références dans BE.NET que les choses se corsent un peu. BE.Net utilise plusieurs règles de réécriture d'URL (url rewriting), il est difficile de référer le script relativement à la page courante donc il faut faire la référence relative au root de l'application. On serait porté à mettre un tag runat="server" sur les scripts et d'utiliser le tilde (˜) pour représenter le root de l'application. Hors, ça ne fonctionne pas puisque le compilateur, à cause du runat="server", valide le code javascript de SyntaxHighlighter et comme il comporte certaines erreurs (ou du moins, une syntaxe que VS2008 n'aime pas), le site web ne compiile plus. J'ai également fait un essai avec du code intégré dans le markup (ex: <%= SiteRoot() %>/Scripts/shcore.js) mais ça ne fonctionne pas non plus puisque le tag header de la page a un runat="server" et comme des contrôles pour les métas tag sont ajoutés dynamiquement au runtime, ASP.NET lance une exception.

Je me suis finalement rabattu sur le ScriptManager, qui me permet 2 choses : je peux ajouter mes fichiers en utilisant le tilde (˜) puisque c'est un contrôle serveur et je peux du même coup combiner les différents scripts nécessaires à SyntaxHighLighter.

<asp:ScriptManager ID="ScriptManager1" runat="server">
    <CompositeScript>
        <Scripts>
            <asp:ScriptReference Path="~/Scripts/shCore.js"/>
            <asp:ScriptReference Path="~/Scripts/shBrushBash.js"/>
            <asp:ScriptReference Path="~/Scripts/shBrushCpp.js"/>
            <asp:ScriptReference Path="~/Scripts/shBrushCSharp.js"/>
            <asp:ScriptReference Path="~/Scripts/shBrushCss.js"/>
            <asp:ScriptReference Path="~/Scripts/shBrushDelphi.js"/>
            <asp:ScriptReference Path="~/Scripts/shBrushDiff.js"/>
            <asp:ScriptReference Path="~/Scripts/shBrushJava.js"/>
            <asp:ScriptReference Path="~/Scripts/shBrushJScript.js"/>
            <asp:ScriptReference Path="~/Scripts/shBrushPlain.js"/>
            <asp:ScriptReference Path="~/Scripts/shBrushPython.js"/>
            <asp:ScriptReference Path="~/Scripts/shBrushRuby.js"/>
            <asp:ScriptReference Path="~/Scripts/shBrushPerl.js"/>
            <asp:ScriptReference Path="~/Scripts/shBrushSql.js"/>
            <asp:ScriptReference Path="~/Scripts/shBrushVb.js"/>
            <asp:ScriptReference Path="~/Scripts/shBrushXml.js"/>
            <asp:ScriptReference Path="~/Scripts/shBrushJavaFX.js"/>
            <asp:ScriptReference Path="~/Scripts/shBrushPowerShell.js"/>
        </Scripts>
    </CompositeScript>
</asp:ScriptManager>

La conséquence de l'utilisation du ScriptManager est que mon implémentation de BE.Net n'est plus totalement compatible avec .Net 2.0. Pas très grave, .Net 4 est sur le point de sortir, il faut vivre dans notre époque, vive .Net 3.5 !

Intégration dans l'éditeur de blogue

BE.Net 1.5 utilise TinyMCE 3 pour éditer les entrées de blogue. L'éditeur a un mode WYSIWYG mais aussi un mode HTML. Il est donc possible de générer les tags nécessaires à l'intégration du code source dans les entrés mais certaines opérations demeuraient manuelles et un peu fasditieuses comme convertir les caractères spéciaux, configurer les options etc. Heureusement, Google ayant "toutes" les réponses, quelqu'un c'était déjà attaqué au problème et avait développé un plugin SyntaxHighlighter pour Tiny MCE. Bien qu'il ne fonctionnait pas très bien avec ma version de Tiny MCE, ça été un jeu d'enfant de faire les corrections dans le code pour le faire fonctionner dans mon éditeur. Aussi, le pluggins ne faisait pas la conversion de caractères mais un petit recherche sur StackOverflow et tout est parfait.

function Save_Button_onclick() {
    var lang = document.getElementById("ProgrammingLanguages").value;
    var code = WrapCode(lang);
    code = code + HtmlEncode(document.getElementById("CodeArea").value);
    code = code + "</pre> "
    if (document.getElementById("CodeArea").value == '') {
        tinyMCEPopup.close();
        return false;
    }
    tinyMCEPopup.execCommand('mceInsertContent', false, code);
    tinyMCEPopup.close();
}

function HtmlEncode(s) {
    var el = document.createElement("div");
    el.innerText = el.textContent = s;
    s = el.innerHTML;
    delete el;
    return s;
}

Voilà ! Tout est fonctionnel maintenant et comme je termine la lecture de Professional ASP.NET MVC 1.0, j'ai plusieurs idées de code à explorer et partager avec vous.
À la prochaine

Soyez le premier à noter ce billet

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Actions:   E-mail | del.icio.us | Permalink | Commentaires (0) | Comment RSSRss comment feed