Colorisation syntaxique dans les billets de blog
Publié : 22 décembre 2012 Classé dans : 3615 Ma vie, Javascript, Non classé, Projets | Tags: Blog, Colorisation syntaxique, CSS, Google code prettify, HTML, Javascript, Tools, Wordpress 1 commentaireVisiblement 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 :
- Coller du code dans un champ texte.
- Ajouter la colorisation syntaxique grâce à google code prettify.
- 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
C’est ce que je recherchais, merci mille fois !
Je connaissais pas ce truc par google, ma foi hyper pratique