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

One Comment on “Colorisation syntaxique dans les billets de blog”

  1. nkCreation dit :

    C’est ce que je recherchais, merci mille fois !
    Je connaissais pas ce truc par google, ma foi hyper pratique


Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s