Comment publier du beau code dans Blogger?

Je voulais faire un tutoriel en ActionScript 3, lorsque j'ai réalisé que copier du code dans Blogger donne un résultat médiocre. Par exemple, si je prends un code en AS3 et que je le copie entre des balises <code>, j'obtiens le résultat suivant:
package
{
    import flash.display.Sprite;
    import flash.events.Event;
  
    /**
     * ...
     * @author
     */
    public class Main extends Sprite
    {
       
        public function Main():void
        {
            if (stage) init();
            else addEventListener(Event.ADDED_TO_STAGE, init);
        }
       
        private function init(e:Event = null):void
        {
            removeEventListener(Event.ADDED_TO_STAGE, init);
            // entry point
        }
       
    }
   
}
Le résultat est horrible! De plus, je n'ai pas la coloration syntaxique. Heureusement, un très dévoué codeur, M. Alex Gorbatchev, a développé un outil nommé Syntax Highlighter. Ce petit logiciel écrit en JavaScript lit le code entré entre des balises <pre>, le met en forme et le colorie en fonction du modèle de format choisi. Par exemple, si j'aime le code sous Eclipse, il est possible de lui dire d'afficher du code comme sous Eclipse. Le même code avec Syntax Highlighter ressemble à ceci:

package 
{
  import flash.display.Sprite;
  import flash.events.Event;
 
  /**
   * ...
   * @author
   */
  public class Main extends Sprite 
  {
  
    public function Main():void 
    {
      if (stage) init();
      else addEventListener(Event.ADDED_TO_STAGE, init);
    }
  
    private function init(e:Event = null):void 
    {
      removeEventListener(Event.ADDED_TO_STAGE, init);
      // entry point
    }
  } 
}

Quelle amélioration!

Pour installer SyntaxHighlighter, j'ai suivi les instructions de ce site: http://www.commonitman.com/2010/09/how-to-use-syntax-highlighter-3-in.html. La procédure est:

1. Allez dans Blogger->Tableau de bord->Présentation
2. Effectuez une copie de sauvegarde avec le lien "Télécharger le modèle dans son intégralité" (optionnel)
3. Choisissez l'onglet "Modifier le code HTML"
4. Cherchez la balise </head>
5. Juste au-dessus de cette balise, copier le code suivant:

   <!-- Syntax Highlighter Additions START -->
   <link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
   <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
    
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
    
   <script language='javascript' type='text/javascript'>
   SyntaxHighlighter.config.bloggerMode = true;
   SyntaxHighlighter.all();
   </script>
   <!-- Syntax Highlighter Additions END -->
   

6. Enregistrer le modèle.

Pour ajouter du code, ajouter la balise <pre class="brush[nom de la brosse];[paramètre de la brosse]> et fermer avec </pre>. Le nom brosse est étrange. En réalité, le nom de la brosse est le nom du code utilisé. Par exemple, pour le code en AS3, la balise est:

< pre class="brush:as3">
   Insérer le code ici.
< /pre >

Pour ajouter un langage, ajouter des lignes au code HTML. La liste des langages supportés se trouve ici.

Amusez-vous bien à publier vos codes!