[plugin] PrismJS Affichage code source avec coloration syntaxique

bazooka07bazooka07 PluXml Lead Developer, Moderator
janvier 2018 modifié dans Plugins
Ce plugin permet d'afficher côté site du code dans différents langages avec une coloration syntaxique

Il est basé sur la librairie disponible à http://prismjs.com.
Le module de base ne prend en compte que quelques langages : HTML/XML, CSS, Javascript.
Il est assez facile de recompiler le module de base pour rajouter des langages comme PHP.
Il existe 128 langages sous forme de modules complémentaires (désignés par components). On peut voir la liste sur Github :
https://github.com/PrismJS/prism/tree/gh-pages/components
A côté de cela , il existe des plugins qu'on peut intégrer au module de base :

* numérotation des lignes
* surlignage de certaines lignes
* télécharger automatiquement le code source depuis Github, Bitbucket, ...
* télécharger le source directement depuis son serveur ( attention au code en php qui va être interprété avant envoi )
* chargement automatique du component pour les langages qui ne sont pas inclus de base
* affichage du langage sous forme de bulle
* bouton pour copier le code dans le presse-papier

J'ai dû modifier légèrement le code pour télécharger automatiquement ces components :
https://github.com/bazooka07/prism branche autoloader-path (git clone https://github.com/bazooka07/prism.git -b autoloader-path )

Le code à afficher est à encapsuler entre une paire de balises <pre class="language-css"><code>body { color: red; }</code></pre> par exemple
Dans le panneau de config, on a le choix entre 23 thèmes avec un aperçu.

Il y a un exemple à cette adresse :
http://kazimentou.fr/article15/test-de-prismjs

Télécharger la dernière version du plugin

2018-01-25 - Version 1.2.0 - Bugfix pour afficher des formats de fichiers peu utilisés
2017-11-27 - version 1.2.0

Réponses

Connectez-vous ou Inscrivez-vous pour répondre.