Prism, coloration syntaxique

Publié le 28-08-2017
etoiles_notation etoiles_notation etoiles_notation etoiles_notation etoiles_notation
Votes : 5 - Note : 3.6




Prism, «dead simple», la coloration syntaxique à la volée



prism

html


Prism, coloration syntaxique

Difficile de commencer ce modeste blog sans aborder l'unique plugin qui y sévit: Prism et les remerciements qui vont avec !

Merci !


D'une facilité d'usage strictement déconcertante, je l'ai choisi parce qu'il respecte les bonnes pratiques de langage et qu'il couvre, malgré son faible poids (225kb sans plugin) 122 langages à cette heure, autant dire qu'il y a le choix.



Installation simple, pour ne pas dire simpliste : une fois uploadés les deux fichiers css et js, on ajoute cette ligne dans l'entête :


<link href="prism.css" rel="stylesheet" /> <!--Choix parmi 7 thèmes possible-->



et cette autre, si possible près de la fin de votre fichier :


<script src="prism.js"></script>


et le tour est joué !

help “10 minutes chrono en main !”



Il suffit ensuite de poser un élément pre avec un code dedans, comme ceci :


<pre><code class="language-css">p { color: red }</code></pre>



avec la possibilité de bloquer la coloration sur certains blocs en ajoutant data-manual :


<script src="prism.js" data-manual></script>



A noter que la classe "langage-xxx" peut être généralisée à un bloc, ou même à l'ensemble de la page.

Le plus long étant de choisir le thème voulu, 10 minutes suffisent largement pour la mise en route ; quant à la prise en main, faire plus simple, c'est difficilement possible.

Ajoutons pour finir une vingtaine de plugins dispos et les tutos pour découvrir l'ensemble de la bête.


A télécharger ici, sans modération http://prismjs.com/ par Lea Verou



Modifié le 01-10-2019

Commentaires

Pas encore de commentaire

Publier un commentaire :



capcha   






GB-Net.fr 2019