Mise en forme de code coloré sur votre site

assez souvent je croise des blogs contenant des portions de code malheureusement non mises en couleur selon le langage.

C'est pourtant pas si compliqué à mettre en place.

de nombreux plugins de blogs wordpress, drupal, dotclear le proposent, si vous écrivez sur un blog.

Ou bien il suffit d'inclure une lib JS (en fin de corps de page) qui se chargera de détecter vos balises ou

, de deviner de quel langage il s'agit et de le colorer en conséquence.

Sauf que le langage n'est pas toujours bien détecté car plusieurs langages utilisent des structures et des mots clés similaires,

il faut souvent utiliser un marquage pour éviter les colorations qui n'ont rien à voir.

pour dotclear, sur lequel fonctionne ce blog j'utilise YASH.

il faut mettre son code dans une balise de préformatage

et lui mettre une classe brush:js par example. Ce qui est un peu relou.

ce qui donne ceci dans le code HTML

là on est dans du html moche mais coloré 

Mais syntaxeHL fait aussi très bien l'affaire:

http://plugins.dotaddict.org/dc2/details/syntaxehl

// wow ce code est trop mieux en couleurvar bonjour = 'Hello Monde!';

Mais si vous voulez un joli thème de coloration y'a le projet HighLightJS qui non seulement met en forme plus de 50 lagages, mais dispose aussi d'un bon paquet de thèmes dans leur démos.

Le site propose aussi de créer un pack de la lib pour ne mettre en forme que certains langages choisis. Vu qu'en général on ne parle pas de quinze mille langages différents sur le même site c'est une option fort chouette.

J'ai donc uploadé le pack.js dans mon dossier public de dotclear ainsi que le thème css qui va bien.

j'ai ajouté l'appel au script dans le footer tpl/_footer.html de mon thème dotclear, 

<script src="/public/highlightjs/highlight.pack.js">script>

<script>hljs.initHighlightingOnLoad();script>

<link rel="stylesheet" href="/public/highlightjs/agate.css">

le code d'exécution dans une autre balise script, chargé le css dans l'entête du fichier tpl/_head.html

Comme sur ce blog j'utilise la balise de code pour montrer du code, et que la mise en forme d'highlightjs s'applique à une balise

#+begin_example (le bonheur est dedans) contenant la balise code, j'ai rajouté une ligne de jquery pour enlevopper mes balises codes d'un préformatage. $('.post-content code').wrap('pre')ainsi je peux spécifier la classe du nom du langage sur ma balise code et elle est conservée.c'est facile à mettre en place, et zoup! ça améliore l'expérience de lecture donc pourquoi s'en priver ? ;)enjoy!