Accueil Blog ⇉ Prism, coloration syntaxique

prism

html

illustration_article

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


**********Addendum****************



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)



Modifié le 17-12-2019
Article précédent


Insérer des images dans un champ select - PHP JQuery
Article suivant


Diaporama fondu-enchainé JQuery en une ligne !

Commentaires

Pas encore de commentaire

Publier un commentaire :



capcha   



Raccourcis : php css html sql js img

Prévisualiser
GB-Net.fr 2020



fleche haut