En tant que rédacteurs d’articles techniques, nous avons souvent à présenter du code sur ce blog. Dans cet article je vais vous montrer la solution que nous avons retenue pour cela.
Notre besoin est le suivant :
- Le code ne doit pas être coloré dans la source : Le code sera formatté automatiquement lors du rendu. Cela permet d’harmoniser le code dans tout le blog et de pouvoir changer le style globalement si nous le souhaitons
- Le code doit être facilement insérable dans le post : Nous utilisons principalement Windows Live Writer pour la rédaction des articles. Le code doit donc être facilement insérable et modifiable dans cet outil
- Le code doit s’afficher correctement sur le blog et dans le flux RSS (notamment dans Feedly)
La mise en forme du code coté client
La cible choisi pour le HTML est la suivante :
<pre><code class="language-csharp">public void Sample() { }</code></pre>
Ce format est celui défini dans la spéc HTML5 et est utilisé par de nombreux outils d’édition et de mise en forme tels que CommonMark.
Pour mettre en forme ce HTML, nous avons choisi Prismjs :
- Léger et facilement intégrable
- Met en forme les langages dont nous avons besoin : C#, HTML, JS, XML, etc.
- Plusieurs extensions pour personnaliser l’affichage : mettre en avant certaines lignes, afficher nom du langage, création automatique de liens, etc.
- Le rendu de base est très joli
- Facilement extensible au besoin
Ajout de code avec Windows Live Writer
Il s’agit de la partie la plus compliqué… Windows Live Writer est prévu pour écrire du texte. D’ailleurs on peut constater qu’il n’y a aucun bouton “code”. Mais heureusement Windows Live Writer est extensible. 4 modes d’extensions sont possibles :
- Ajout/modification de texte simple,
- Ajout/Modification de texte avancé (ce que nous avons choisi),
- Ajout d’un Header/Footer,
- Interception de l’envoi du post vers le blog.
Nous avons donc écrit une extension permettant de saisir du code et de générer le HTML ci-dessus. Voici comment fonctionne l’extension :
L’extension ajoute un bouton “Code Editor” dans le menu d’extensions. Lors du clic, une fenêtre permet de saisir le code. Un bloc est ajouté dans le texte de l’article. Point intéressant le bloc n’est éditable que via l’extension. On est ainsi sûr de ne pas modifier le HTML et le code reste donc toujours correctement formatté.
Une version utilisable de l’extension est disponible sur GitHub. (Note : il s’agit d’une version simplifiée de l’extension que nous utilisons)
Conclusion
La solution choisie n’a rien de spécifique à notre plateforme de blog, vous pouvez donc l’utiliser quelque soit votre plateforme (WordPress, BlogEngine.NET, Ghost, etc. ). La seule chose à intégrer dans le blog est Prismjs (fichier CSS et JS). Côté éditeur il suffit d’installer le plugin. Bref en 10 minutes c’est fini !
