Depuis quelques temps, je cherchais une solution élégante et efficace pour poster à la fois du code et des équations sur Dotclear pour poster ici même quelques billets un peu plus techniques à l'avenir. J'ai fini par trouver mon bonheur, du moins sur le papier. L'usage déterminera si ces solutions sont vraiment bonnes ou non.

Insérer du code dans Dotclear

Pour ce qui est du code, j'ai choisi d'utiliser le plugin YASH (pour Yet Another Synthax Highlighter) qui encapsule le SyntaxHighlighter d'Alex Gorbatchev en utilisant la syntaxe wiki de l'éditeur Dotclear. Celui-ci a le mérite d'effectuer le parsing et d'appliquer une coloration syntaxique pour de nombreux langages différents. Différentes CSS sont disponibles par défaut ainsi que quelques petits add-on tels que la numérotation des lignes et la sélection du texte facilitée par un double clic sur le code.

Ensuite, pour insérer une portion de code, rien de plus simple :

///yash python
def distance(a, b)
    '''Calcule la distance L1'''
    r = abs(a - b)
    return r
//./

Le point dans la dernière ligne a bien entendu été ajouté afin qu'elle ne soit pas interprétée par le parser, vous pouvez donc l'enlever dans votre cas.

Ce code nous donne donc :

def distance(a, b)
    '''Calcule la distance L1'''
    r = abs(a - b)
    return r

C'est simple, élégant et efficace. Pour l'usage que je veux en faire, c'est très bien !

Insérer des équations dans Dotclear

Pour les équations, c'est tout de suite plus compliqué car il n'existe à ce jour aucun plugin permettant d'écrire des équations MathML ou d'embarquer des équations LaTeX dans Dotclear.

Je me suis naturellement tourné vers MathJax qui est une solution que nous utilisons également dans mon entreprise. L'avantage de MathJax est qu'il peut à la fois être installé sur son propre serveur mais il est également disponible en tant que web-service via un Content Delivery Network (CDN), une sorte de cloud qui permet au lecteur de recevoir les images depuis le serveur le plus proche. Cette méthode est parfaite pour ne pas se casser la tête à installer et maintenir MathJax à chaque mise à jour.

Il suffit donc d'insérer le script suivant :

<script type="text/javascript"
  src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

ou une de ses variantes selon la configuration que vous souhaitez parmi celles expliquées dans la documentation en ligne et le tour est joué. MathML étant principalement faite pour écrire des équations depuis un éditeur WYSIWYG, je vous conseille d'écrire les équations en \(\LaTeX\) qui est plus efficace pour une petite main humaine.

Il suffit ensuite d'écrire vos équations avec la syntaxe suivante dans un code HTML pour les équations en bloc :

\[e^x = \sum_{n=0}^{+\infty}{\frac{x^n}{n!}}\]

Ce qui nous donne :

\[e^x = \sum_{n=0}^{+\infty}{\frac{x^n}{n!}}\]

Et les équations en ligne ont leur pendant (qui marche cette fois-ci sans le conteneur HTML) ci-après :

\(e^{i\Pi} + 1 = 0\)

Ce qui permet d'écrire l'équation d'Euler \(e^{i\Pi} + 1 = 0\) en plein milieu d'une phrase comme c'est le cas ici.

En suivant ces quelques conseils, vous pouvez en quelques minutes rendre votre blog Dotclear opérationnel pour traiter des sujets techniques, des vrais, avec un confort de lecture et d'écriture non négligeables. De mon côté en tout cas, je ne vais pas m'en priver ! ;)