Coloration syntaxique de vos articles avec HighlightJs

Voici un petit plugin web qui devrait vous plaire. Son nom est HighlightJs. Il vous permet d’améliorer l’esthétique de votre balise html <code> automatiquement.

Ce plugin ce compose d’un script javascript et de feuilles de stlyle CSS. Le Javascript se charge de détecter la syntaxe du langage que vous avez saisi (php, sql, bash, python …) et habille en fonction le texte grace au style CSS de votre choix (un peut à la manière d’OpenClassRoom pour ceux qui connaissent).

Le package est téléchargeable depuis ce lien.

Installation

Tout est très simple, coté HTML on inclut le style, le javascript puis on déclenche l’exécution du script


 

Ici j’ai choisi d’utiliser le style Monokai de Sublime Text, mais il en existe des tas d’autres que vous pouvez tester en ligne comme illustré ci dessous :

highlightLiveDemo

 

Utilisation

Le script « initHighlightingOnLoad » attend juste le couple de balise <pre><code></code></pre> pour habiller la balise <code>. Bien que HighlightJs détecte le langage je conseille toutefois de le préciser dans la classe comme il est prévu de faire :


 

Là coloration syntaxique du code s’appuiera sur la nomenclature du python. Pourquoi y’a-t-il une classe « code » à la balise « <pre> » ? Réponse juste après.

Overflow horizontal

Pour une meilleure lisibilité du code, je vous conseille d’activer la scrollbar horizontal afin que le code ne reviennent pas à la ligne automatiquement et ainsi perturbe l’indentation :

highlightOverFlowAvant
Sans OverFlow

highlightOverFlowApres
Avec OwerFlow

 

Pour faire de l’overflow utiliser le CSS tout simplement 


La balise « <pre> » qui contientra le code devra poster la classe « code »

 

 

Intégration dans le TinyMce de WordPress

Comme je suis (un peu) fainéant, je n’ai pas envie d’écrire à la main « <pre><code classe= »langage »></code></pre> » dans mon WYSIWYG (TinyMce pour moi) j’ai trouvé un petit plugin WordPress qui permet d’écrire ce code à ma place. Il s’appelle AddQuicktag et ajoute automatiquement une liste déroulante à Tiny MCE.

Une fois AddQuicktag installé il faut lui ajouter des item dans cette fameuse liste déroulante :

QuickTagConfig

  • Ici j’ai configuré la balise pre et code pour du code « bash », cet item portera le nom de « preCodeBash »

 

Ensuite dans TinyMce on retrouve la liste déroulante il n’y a plus qu’a cliquer sur l’item de son choix :

QuickTagTinyMce

 

Et vous vous utilisez vous aussi HighLightJs ou bien quelque chose de similaire ?

 

A propos de l'auteur :  Fabien Lierville

Chef de projet en Ingénierie Informatique Industrielle avec une expérience significative de 17 années. Gestion de projet à dominante pharmaceutique avec le respect de méthode qualité (GAMP V5). Véritable passionné d'informatique depuis l'Amstrad cpc 6128 ;)

Laisser un commentaire