Coloration syntaxique dans Dotclear avec SyntaxHighlighter

Téléchargement

Le meilleur moyen de se procurer SyntaxHighlighter, et plus particulièrement la dernière version, est de se rendre sur la page de téléchargement du site officiel.

Il faut ensuite décompresser l'archive précédemment téléchargée et la télécharger sur le serveur du blog, et plus particulièrement dans le sous-dossier js du template Dotclear. Ici, l'emplacement de destination est le dossier /themes/idreammicro/js/syntaxhighlighter/.

Dotclear définit le tag {{tpl:BlogThemeURL}} permettant d'indiquer l'emplacement du thème courant. Par la suite, c'est cet emplacement qui sera privilégié : {{tpl:BlogThemeURL}}/js/syntaxhighlighter/.

Intégration

L'intégration de SyntaxHighlighter dans Dotclear se fait en modifiant le template utilisé et plus particulièrement les fichiers _top.html et _footer.html.

Fichier _top.html

Dans le fichier _top.html, on indique l'emplacement du core de SyntaxHighlighter (ligne 3) ainsi que les feuilles de styles à utiliser (lignes 5 et 6).

<!-- Syntax Highlighter -->
<!-- Include required JS files -->
<script type="text/javascript" src="{{tpl:BlogThemeURL}}/js/syntaxhighlighter/scripts/shCore.js"></script>
<!-- Include *at least* the core style and default theme -->
<link href="{{tpl:BlogThemeURL}}/js/syntaxhighlighter/styles/shCore.css" rel="stylesheet" type="text/css" />
<link href="{{tpl:BlogThemeURL}}/js/syntaxhighlighter/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />

Fichier _footer.html

Dans le fichier _footer.html, on indique l'emplacement des fichiers Javascript de SyntaxHighlighter (lignes 2 et 3) ainsi que les brushes à utiliser (lignes 16 à 20), chacune correspondant à un langage. Il est également possible de changer les options de SyntaxHighlighter, par exemple désactiver l'affichage de la barre d'outils (ligne 21).

<!-- Syntax Highlighter -->
<script src="{{tpl:BlogThemeURL}}/js/syntaxhighlighter/scripts/shCore.js" type="text/javascript"></script>
<script src="{{tpl:BlogThemeURL}}/js/syntaxhighlighter/scripts/shAutoloader.js" type="text/javascript"></script>
<script type="text/javascript">
    function path()
    {
        var args = arguments,
            result = []
            ;
       
        for(var i = 0; i < args.length; i++)
            result.push(args[i].replace('@', '{{tpl:BlogThemeURL}}/js/syntaxhighlighter/scripts/'));
       
        return result;
    };
    SyntaxHighlighter.autoloader.apply(null, path(
        'bash @shBrushBash.js',
        'c cpp @shBrushCpp.js',
        'python @shBrushPython.js'
    ));
    SyntaxHighlighter.defaults['toolbar'] = false;
    SyntaxHighlighter.all();
</script>

Le mot de la fin

L'intégration de SyntaxHighlighter dans Dotclear est terminée, de la manière la plus simple possible. De nombreuses autres possibilités et exemples sont à découvrir sur le site officiel : brushes et styles personnalisés, paramètres de configuration, etc...

iDreamMicro