Mettre du code dans son blog

Si vous avez regardé un peu mon blog, vous aurez constaté qu'il y a du code dans plusieurs posts.

Je ne sais pas si la façon dont il est présenté vous convient, mais je suis convaincu que c'est beaucoup mieux qu'au début (j'ai tout édité donc impossible pour vous de voir comment c'était avant).

Sans surprise je n'ai rien inventé, ça se saurait, mais avant de trouver comment faire, j'ai tout de même dû chercher pas mal et comme tous ce que j'ai trouvé d'utile étaient en anglais, je vous le fais en français.

Déjà une chose importante à savoir.
Je n'ai rien trouvé qui soit vraiment à mon goût sans passer par un modèle de type avancé.
Evidement passer en mode avancé peut rebuter certains, cela dit la modification que j'utilise est très simple et peut à mon avis être mise en œuvre par tout le monde. Petite précision, mon tout le monde concerne tout de même des personnes qui veulent mettre du code dans leurs posts et qui ne sont donc pas totalement paniquée à l'idée d’utiliser l'éditeur HTML (cf. image ci-dessous) pour créer les dits posts.

Une remarque très importante, que vous trouverez à chaque fois qu’il est question d'utiliser l'éditeur HTML, ayez toujours le texte que vous mettez dans l'éditeur HTML dans un fichier chez vous. N'écrivez pas le code de vos page directement dans l'éditeur HTML, faites-le avec l'éditeur de votre choix sur votre ordinateur et lorsque vous souhaitez mettre à jour votre page avec l'éditeur HTML faites ctrl + A pour tout sélectionner et coller à la place le contenu complet et à jour de votre page.

Voyons maintenant les divers moyens permettant de mettre du code dans son post.

Niveau 0, pas très beau selon moi, mais qui utilise, ni l'éditeur HTML, ni un modèle avancé, la liste. Il suffit de passer en mode liste, de préférence avec numéro de ligne, pour vos lignes de code et le tour est joué.
Evidemment la gestion des lignes très longues n'est pas extraordinaire et la coloration syntaxique inexistante.

Le niveau 1, requière l’utilisation de l'éditeur HTML. Vous pouvez profiter de sa puissance (la vôtre en fait) et utiliser des tags HTML plus sympathiques.
Personnellement j'avais un faible pour le tag "textarea" qui permet d'avoir des barre d'ascenseur très facilement (par exemple avec <textarea rows="10" cols="80" wrap="off" readonly="true">) et m'aurait permis de caser 100 lignes de code en occupant beaucoup moins de place dans la page.
Problème, le superbe éditeur HTML ne veut pas conserver les sauts de ligne se trouvant entre les tags ouvrants et fermants du textarea.
Une recherche sur le forum de canalblog, voir sur le web, ne donne rien qui ressemble de près ou de loin à une solution.
J'ai donc dû me rabattre, comme tout le monde, sur le tag "pre".
Voici un exemple de HTML à mettre dans l'éditeur du même nom :
<pre>
void kinectRuntime_VideoFrameReady(object sender, ImageFrameReadyEventArgs e)
{
&nbsp; &nbsp;&nbsp;&nbsp;throw new NotImplementedException();
}
</pre>
Personnellement je considère qu'il s’agit d'un progrès mais sans y associer une feuille de style, il n'y a aucune possibilité "raisonnable" d'obtenir de la coloration syntaxique. Or pour mettre une feuille de style il faut passer son modèle en mode avancé ce qui nous amène au niveau 2.

Niveau 2, qu'elles solutions s'offrent à nous si l'on accepte de passer notre modèle en mode avancé ?
J'en ai retenu trois :

1. http://www.manoli.net/csharpformat/. Vous copiez le code dans la zone d’édition de la page, vous choisissez le langage (ok il n’y en a pas beaucoup mais il y a celui de mes exemples, c#), vous indiquez si vous voulez ou non des numéros de ligne et vous appuyez sur le bouton "format my code". Vous avez la feuille de style à ajouter à votre header et les tags à ajouter dans votre post. Il ne vous reste plus qu’à ajouter la feuille de style dans le header de vos modèles de page et le tour est joué. Si la mise en œuvre est simple, la coloration syntaxique obtenue n’est pas exactement celle à laquelle je suis habitué (je ne parle pas des couleurs mais des éléments reconnus).
2. Utiliser jEdit et une feuille de style. Cette méthode est décrite dans une série de 3 posts (Best Syntax Highlighter for Blogger–Part 1, Best Syntax Highlighter for Blogger Part 2 et Best Syntax Highlighter for Blogger Part 3)
   Le résultat met en œuvre le même principe que la solution précédente, ce qui change c'est comment sont générés le source HTML et la feuille de style. Si vous le lisez pas l’anglais c'est assez simple.
   Installez jEdit et ajoutez le plugin "Code2HTML" (menu "Plugins", puis "Plugin Manager…", onglet "Install" et la suite je vous laisse deviner).
   Editez votre code dans jEdit et demandez à "Code2HTML" de vous le traduire en HTML.
   Pour avoir le rendu qui vous convient, il faut alors définir la feuille de style avec les couleurs qui vous plaisent (celles par défaut n'étant pas forcement celles de VS).
   Il y a de grande chance que je passe à cette solution lorsque j'aurais finalisé ma feuille de style mais pour l'instant j'utilise une troisième solution.
3. SyntaxHighlighter. Le gros avantage de cette méthode réside dans le fait que je n'ai quasiment rien eut à faire pour la mettre en œuvre (j'avais déjà les tags "pre"). L'inconvénient, c'est qu'elle utilise des scripts qui demandent donc du travail au butineur et conduit à des temps de chargement + exécution des scripts plus important que les méthodes précédentes.
   Pour la mettre en œuvre, rien de bien compliquer. Dans les pages concernées de votre modèle ("Page d’accueil" et "Page d'un message") vous ajoutez juste avant la fin du header (avant </head>)
   <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>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'></script>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script>
   <script language='javascript'>
   SyntaxHighlighter.config.bloggerMode = true;
   SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
   SyntaxHighlighter.all();
   </script>
   Bon rien ne vous oblige à charger les fichiers de scripts des langages que vous n'utilisez pas. Un avantage en passant, comme vous utilisez les fichiers scripts de l'auteur ils seront toujours à jour. Inconvénient, si son site est down...
   Il ne vous reste plus, pour chaque "pre" qui contient du code, qu'à ajouter l'utilisation de la bonne brosse. Dans mon cas cela donne <pre class="brush: csharp">.

Evidement il y a d'autres possibilités et votre moteur de recherche préféré ne manquera pas de vous en trouver d'autres, mais je trouve ces méthodes simples à mettre en œuvre et les deux dernières permettent d'envisager plusieurs langages pour votre code.