PluXml.org

Blog ou CMS à l'Xml

Vous n'êtes pas identifié(e).

#1 28/11/2017 00:12:48

bazooka07
Membre
Lieu : Quelque part en Rhône-Alpes
Inscription : 06/02/2014
Messages : 830
Site Web

[plugin] PrismJS Affichage code source avec coloration syntaxique

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/g … 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

2017-11-27 - version 1.2.0

Hors ligne

Pied de page des forums

A propos Nous soutenir Contact Twitter Google+
Copyright © 2006-2017 PluXml.org, tous droits réservés