Shiki le highlighter de code

Shiki est un puissant et élégant syntax highlighter basé sur les grammaires et thèmes TextMate, le même moteur utilisé par Visual Studio Code.

Il est hautement personnalisable grâce à sa base HAST, permettant l’ajout d’extensions et de transformations. Compatible avec divers environnements JavaScript modernes, Shiki s’intègre aisément dans des contextes tels que les navigateurs, Node.js ou les Workers Cloudflare.

Il offre une coloration syntaxique précise et rapide pour la plupart des langages de programmation courants. Fonctionnant en amont, Shiki génère le surlignage sans nécessiter de JavaScript à l’exécution, ce qui améliore les performances.

Autrement dit, contrairement à d’autres systèmes tels que Prism, Shiki ne nécessite pas de dépendance côté front pour afficher le code. Pas de JS et pas de CSS.

Plus d’infos sur : shiki.matsu.io

Le plugin WordPress Shiki-my-code

J’avais par le passé déjà créé un surligneur de code avec Prism, mais c’était vraiment compliqué du côté de l’éditeur Gutenberg pour obtenir quelque chose d’éditable facilement.

Je me suis donc tourné vers Shiki, qui est utilisé dans beaucoup de systèmes front, notamment les générateurs de documentation.

L’avantage, c’est de transformer le code directement dans l’éditeur et de l’enregistrer prêt à être affiché avec les balises et les styles. Donc, quand on sauve le contenu, le bloc de code est déjà mis en forme.

Côté front, l’affichage, c’est simplement du HTML mis en forme. C’est donc très rapide.

Exemple

Voici le mode d’édition sous forme de GIF. Et juste en dessous le résultat du bloc en front.

x=13
resultat=x+2
resultat=resultat*2
print(resultat)

Le plugin dispose aussi de quelques méthodes pour mettre en avant une ligne, un mot ou une modification. Attention, suivant les languages, cela fonctionne plus ou moins bien.

x=13
resultat=x+2
resultat=resultat*2
print(resultat)

Réglages du plugin

Il est évidemment possible de sélectionner le langage du bloc de code : PHP, JavaScript, CSS, etc., et de définir un thème (clair et sombre). Attention cependant, le thème reste spécifique au bloc et ne se règle pas globalement. Il faudra donc repasser dessus pour modifier le thème.

Pour garder une cohérence pour le site, le plugin dispose d’une page d’options pour définir par défaut le thème des blocs, ce qui évite de devoir sélectionner à chaque fois le thème.

Bonus

Astuce très pratique, vous pouvez transformer un bloc de code déjà existant en bloc Shiki.

Comment utiliser le plugin Shiki my code

Rendez vous simplement sur le répertoire GitHub :https://github.com/wpperformance/shiki-my-code

Le code est open-source et utilisable comme bon vous semble.