skip to main | skip to sidebar
Code 18
Manuel du savoir-faire à l'usage des geeks et des curieux
RSS
  • Accueil
  • Le web au Québec
  • Liens
  • Twitter
  • Facebook
  • À propos

jeudi 8 janvier 2009

Ajouter de la coloration syntaxique au code source publié

Publié par Infinite Loop, à 19 h 58 7 commentaires

Comme je publie parfois du code source sur mon blogue, je me disais que ça serait intéressant de pouvoir ajouter de la couleur à mes exemples pour faciliter la lisibilité. Au début, j'ai vérifié si je ne pouvais pas utiliser quelque chose comme la coloration syntaxique de GeSHI (Generic Syntax Highlighter) mais comme il s'agit d'une librairie PHP, je devais trouver une autre solution.

En fouillant un peu, je suis tombé sur Quick Highlighter, un convertisseur web qui prend le code en entrée (on doit spécifier le langage) et qui retourne le code coloré en format HTML. Avec ça, j'aurais pu simplement copier / coller le résultat dans mon blogue.

Mais comme je voulais quelque chose d'un peu plus automatisé, j'ai découvert sur Google Code un projet qui s'appele SyntaxHighlighter, complètement indépendant du serveur web puisqu'il fonctionne côté client en JavaScript et CSS. Peut-être avez-vous déjà vu le rendu du code source de Yahoo Developer Network ou Aptana ? C'est ce composant qu'ils utilisent.

Par rapport à GeSHi, SyntaxHighlighter possède trois défauts notables:

  • il est plus lent que GeSHi (qui roule côté serveur)
  • il est efficace pour une source comptant peu de code
  • il est limité au niveau des langages supportés : C++, C#, CSS, Delphi, Java, JavaScript, PHP, Python, Ruby, SQL, VB, XML et HTML
Pour l'intégrer à mon blogue Blogger, voici ce que j'ai du faire:
  1. Dans l'onglet Layout, aller dans Edit HTML
  2. Juste avant la balise </head>, faire un lien vers les fichiers JavaScript de chaque langage pour lequel on veut supporter la coloration :

    <script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js'/>

    <script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js'/>

    <script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js'/>

    <script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js'/>

    <script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js'/>

    <script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js'/>

  3. Juste avant la balise </body>, copier le code suivant qui permet d'initialiser le composant. Il doit se trouver à la fin car le DOM doit être complètement chargé pour pouvoir le détecter.

    <script language="javascript">
    dp.SyntaxHighlighter.BloggerMode();
    dp.SyntaxHighlighter.HighlightAll('code');
    </script>

  4. Comme je n'ai pas réussi à lier la feuille de style CSS par une balise <link> pour que ça fonctionne avec Firefox, il m'a fallu ouvrir le fichier http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css et copier le code CSS et le coller avant la ligne ]]></b:skin>. Le mieux est de le placer à la fin des CSS définis par Blogger sinon la taille du texte sera changée (dans mon cas, le texte avait considérablement grossit).
  5. Placer le code source entre la balise suivante. Prenez soin d'indiquer dans l'attribut "class" le langage à colorer :

    <pre name="code" class="PHP">code à placer ici</pre>

  6. Vous devriez voir l'exemple ci-dessous avec la coloration syntaxique :
$var = 1;
if ($var == 1) {
echo 'OK';
}


Tags: JavaScript, Programmation

7 réponses à "Ajouter de la coloration syntaxique au code source publié"

  1. Semi Bourouis a dit...
    27 janvier 2010 à 09 h 25

    je cherchai depuis un bout de temps un script php et GeSHi semble etre le bon puisque je disposerais d'un espace ftp perso.

    Merci :)

    Climbatize a dit...
    5 février 2010 à 18 h 57

    Merci pour la solution, je commençait à me dire que blogger c'était pas top pour poster mon code :)

    Unknown a dit...
    24 mars 2010 à 11 h 50

    Excellent exemple. A quand ce genre de fonctions en standard sur Blogger (et autres moteurs de blogs) !

    Sébastien GUARY a dit...
    25 juin 2010 à 03 h 22

    Merci pour l'astuce. 5 min montre en main pour le mettre en service.

    Daninthe Sandro WebDEV a dit...
    24 octobre 2010 à 18 h 35

    Merci beaucoup ;)
    Indispensable astuce ! 20/20

    weboblog a dit...
    10 avril 2011 à 06 h 52

    Excellent ! Je peux dorénavant m'en servir pour mon propre blog. Merci beaucoup pour cette contribution !

    blog_sophro a dit...
    17 décembre 2011 à 06 h 45

    Merci !
    Super et indispensable !
    Je me suis permis de citer cet article sur mon blog, juste sous mon insertion de code.

    Si vous voulez voir un exemple en python: http://funwitharduino.blogspot.com/2011/12/domotique-temperature-thermostat-on-www.html


Publier un commentaire

Message plus récent Messages plus anciens Accueil
S'abonner à : Publier des commentaires (Atom)
    Suivre @code18 sur Twitter

    Catégories

    • Apache (21)
    • Citations (167)
    • Club Vidéo (24)
    • Coffre à outils (55)
    • CSS (8)
    • Curiosités (117)
    • Design Pattern (2)
    • Drupal (8)
    • Easter Eggs (22)
    • Extensions Firefox (20)
    • GIMP (7)
    • Histoire (21)
    • HTML (32)
    • Humour (57)
    • Intégration (34)
    • iPod (12)
    • JavaScript (110)
    • Jeu de combat (6)
    • Le coin du geek (128)
    • Liens (12)
    • Linux (56)
    • Livres (78)
    • Lois et principes (46)
    • Marché des saveurs (26)
    • Mathématique (18)
    • Mobile (5)
    • Montréal (32)
    • Musique (112)
    • Pancartes et écriteaux (16)
    • Perl (8)
    • Pérou (1)
    • PHP (130)
    • PostgreSQL (44)
    • Programmation (105)
    • Saviez-vous que (55)
    • Sécurité (22)
    • SEO (5)
    • SQL Server (22)
    • Vieilles publicités (6)
    • Virtualisation (8)
    • Voyages (1)
    • Zend Framework (26)

    Divers

    Archives

    • ►  2015 (6)
      • ►  août 2015 (1)
      • ►  juillet 2015 (1)
      • ►  février 2015 (3)
      • ►  janvier 2015 (1)
    • ►  2014 (8)
      • ►  décembre 2014 (1)
      • ►  novembre 2014 (1)
      • ►  octobre 2014 (1)
      • ►  août 2014 (2)
      • ►  juillet 2014 (2)
      • ►  janvier 2014 (1)
    • ►  2013 (53)
      • ►  décembre 2013 (2)
      • ►  novembre 2013 (1)
      • ►  octobre 2013 (3)
      • ►  septembre 2013 (2)
      • ►  août 2013 (5)
      • ►  juillet 2013 (3)
      • ►  juin 2013 (5)
      • ►  mai 2013 (3)
      • ►  avril 2013 (7)
      • ►  mars 2013 (7)
      • ►  février 2013 (11)
      • ►  janvier 2013 (4)
    • ►  2012 (105)
      • ►  décembre 2012 (8)
      • ►  novembre 2012 (5)
      • ►  octobre 2012 (4)
      • ►  septembre 2012 (1)
      • ►  août 2012 (8)
      • ►  juillet 2012 (7)
      • ►  juin 2012 (7)
      • ►  mai 2012 (10)
      • ►  avril 2012 (13)
      • ►  mars 2012 (15)
      • ►  février 2012 (15)
      • ►  janvier 2012 (12)
    • ►  2011 (146)
      • ►  décembre 2011 (14)
      • ►  novembre 2011 (11)
      • ►  octobre 2011 (12)
      • ►  septembre 2011 (13)
      • ►  août 2011 (15)
      • ►  juillet 2011 (17)
      • ►  juin 2011 (18)
      • ►  mai 2011 (15)
      • ►  avril 2011 (9)
      • ►  mars 2011 (7)
      • ►  février 2011 (3)
      • ►  janvier 2011 (12)
    • ►  2010 (398)
      • ►  décembre 2010 (29)
      • ►  novembre 2010 (28)
      • ►  octobre 2010 (32)
      • ►  septembre 2010 (34)
      • ►  août 2010 (22)
      • ►  juillet 2010 (35)
      • ►  juin 2010 (42)
      • ►  mai 2010 (36)
      • ►  avril 2010 (37)
      • ►  mars 2010 (34)
      • ►  février 2010 (32)
      • ►  janvier 2010 (37)
    • ▼  2009 (429)
      • ►  décembre 2009 (32)
      • ►  novembre 2009 (34)
      • ►  octobre 2009 (33)
      • ►  septembre 2009 (37)
      • ►  août 2009 (37)
      • ►  juillet 2009 (39)
      • ►  juin 2009 (38)
      • ►  mai 2009 (37)
      • ►  avril 2009 (35)
      • ►  mars 2009 (36)
      • ►  février 2009 (32)
      • ▼  janvier 2009 (39)
        • Google peut nuire à votre ordinateur
        • Formulaire Flash pointant vers un autre domaine
        • Gérer la configuration d'un site avec Zend_Config
        • Super Mario Sunshine
        • Candidature de programmeur PHP rejetée
        • Simulateur de vol dans Google Earth
        • Fonctions anonymes dans PHP
        • Échec de conversion de fichier
        • Trouver le chemin de l'interpréteur Perl
        • Citation no. 14 sur les ascenseurs
        • Convertir un objet PHP en JSON
        • Type Serial de PostgreSQL
        • Traiter du code source avec SED
        • Boucle infinie
        • Automatiser YUI Compressor sur Windows
        • Le Principe de Peter
        • Protéger son site web contre les injections SQL
        • Citation no. 13 sur l'Univers
        • Police de caractères Spider-Man au hockey ?
        • Introduction à Greasemonkey
        • YUI Compressor Online
        • 2001, L'Odyssée de l'espace
        • Obtenir la clé primaire d'une table sous SQL Server
        • Créer un log des modifications avec SQL Server
        • Ouverture de compte Delicious
        • Easter eggs dans Firefox
        • Space Invaders dans OpenOffice
        • Citation no. 12 sur la démission
        • Utiliser GeSHi en PHP pour colorer le code source
        • Le Sportnographe à la radio de Radio-Canada
        • Ajouter de la coloration syntaxique au code source...
        • Ajouter au Windows Explorer un raccourci vers le c...
        • Arbre binaire de recherche
        • L'open source s'étend aux produits de la vie quoti...
        • Homestar Runner
        • Citation no. 11 - Spécial fortune cookie
        • Logiciel d'édition graphique gratuit
        • Prononciations d'acronymes en informatique
        • Favicon pour iPod Touch et iPhone
    • ►  2008 (84)
      • ►  décembre 2008 (34)
      • ►  novembre 2008 (39)
      • ►  octobre 2008 (11)

    Abonnés

Copyright © All Rights Reserved. Code 18 | Converted into Blogger Templates by Theme Craft