Prism, coloration syntaxique
Prism, «dead simple», la coloration syntaxique à la volée
Accueil du blog
Derniers articles
prism
html
Difficile de commencer ce modeste blog sans aborder l'unique plugin qui y sévit: Prism et les remerciements qui vont avec !
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é !
“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
Je n'avais pas été confronté à la question, mais en rajoutant la possibilité de mettre du code dans les commentaires, elle s'est naturellement posée : comment "highlighter" un texte un fois que le DOM a été chargé et traité ?
C'est là que j'ai été jeter un coup d'oeil dans l'Api où on découvre des tas de petites choses intéressantes, dont la famille highlight et en particulier highlightAll qui permet de traiter à posteriori, comme ceci.
Mettons un retour Ajax sous cette forme
$my_array = array("<pre><code class=\"language-css\">".$mon_code."</code></pre>");
echo json_encode($my_array);
Il suffira de faire
success: function(data) {
$("#ma_Div").html(data[0];
Prism.highlightAll(data[0]);
}
Et le tour est joué !
(Ça marche de la même façon pour n'import quel bloc que vous avez à traiter dans la page, même sans ajax d'ailleurs)
Pas encore de commentaire
