Colorisation syntaxique dans les billets de blog

Visiblement on ne peut pas injecter de CSS ni de JS dans les posts avec wordpress.com, ni même modifier la structure du thème pour les ajouter. C’est plutôt embêtant pour afficher du code avec la colorisation syntaxique dans les billets.

EDIT : Finalement j’ai trouvé une solution proposée par WordPress.com pour ajouter du code dans les articles : http://en.support.wordpress.com/code/posting-source-code/

Voila comment ça fonctionne :

[sourcecode language= »javascript »]
alert(« Hello World »);
[/sourcecode]

Ce qui donne :

     alert("Hello World");

Pour remédier à ce problème j’ai créé ce petit outil qui fait un job très simple :

1. Coller du code dans un champ texte.
2. Ajouter la colorisation syntaxique grâce à google code prettify.
3. Exporter le code HTML avec les styles directement dans les balises plutôt que de passer par des classes.

Et pour faire une petite démo je vais commenter la source de cet outil.

Javascript

// Input <textarea>
var $rawSource = $("#raw_source");

// <div> de prévisualisation
var $prettified = $("#prettified");

// Output <textarea>
var $prettifiedSource = $("#prettified_source");

// Bouton d'action Prettify me!
$("#prettify_button").on("click",function(){

    // Mise à jour du code à afficher
    $prettified.text($rawSource.val());

    // Application de la colorisation syntaxique avec google code prettify
    prettyPrint();

    // Transformation de la class en style sur chaque balise
    $prettified.children().each(function(){
        var $el = $(this);
        $el.css("color", $el.css("color")).removeAttr("class");
    });

    // Ajout du wrapper "<pre>" pour garder la mise en forme du code
    var prettifiedSourceHtml ='<pre>'+$prettified.html()+'</pre>';

    // Mise à jour du <textarea> output
    $prettifiedSource.text(prettifiedSourceHtml);

});

HTML

<div>
    <h2>Input</h2>
    <textarea id="raw_source"></textarea>
    <input type="button" id="prettify_button" value="Prettify me!">
</div>
<div>
    <h2>Output</h2>
    <textarea id="prettified_source"></textarea>
</div>
<div>
    <h2>Results overview</h2>
    <pre class="prettyprint" id="prettified"></pre>
</div>

Maintenant je suis prêt pour rédiger des articles techniques, j’espère que ce script sera utile à d’autres bloggeurs.

Mon premier « vrai » article portera sur RequireJS.

Joyeuse Apocalypse

Publicités

---