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 couleur
var 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

 (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!

Si vous aimez ce que nous faisons à Cipher Bliss, vous pouvez nous soutenir de plusieurs façons: en faisant un micro don sur liberapay , ou en cryptomonnaies. Le plus simple nous pour nous faire connaître étant de partager cet article.
Suivez moi sur Mastodon @tykayn@mastodon.cipherbliss.com.
Ce site restera libre comme un gnou dans la nature et sans pubs, parce qu'on vous aime. Que la source soit avec vous!

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.