Code CSS pour afficher... du code CSS avec <pre> et <code>

Bonjour, après quelques recherches infructueuses, je vous expose ma problématique :

Je souhaiterais afficher dans les articles de mon site, des bouts de code HTML, CSS, PHP. J'ai fait des essais avec <pre> et <code> mais j'aimerais bien d'une part "échapper" le code (et pouvoir écrire et afficher <p> p { ect...), et d'autre part colorer la syntaxe.

J'ai été voir le code source de certains sites (dont celui-ci) mais ouch c'est du lourd.

Existe-t-il une bibliothèque qui gère ce type de problématique ? Par où commencer ?

Cordialement.

Bonjour,

je te recommande Prism.js par Lea Verou, très léger et suffisant pour du code front-end (pas sûr pour PHP, ça fonctionne peut-être ou via un plugin ?).
Sinon pour plus de langages, peut-être highlight.js ? Pas testé ou pas depuis longtemps...

Bonjour.

Je souhaiterais afficher dans les articles de mon site, des bouts de code HTML, CSS, PHP. J'ai fait des essais avec <pre> et <code> mais j'aimerais bien d'une part "échapper" le code (et pouvoir écrire et afficher <p> p { ect...), et d'autre part colorer la syntaxe.

Je ne sais pas si tu as besoin d'afficher beaucoup de code, et si tu cherches une solution automatique, mais dans le cas contraire, tu peux toujours faire ça à la main.

Pour le code CSS ou PHP, il n'y a pas de problème. Pour le code HTML, pour éviter de voir le code exemple se transformer en vrai code, il suffit de remplacer les caractères < et > par leurs équivalents HTML entities, soit &lt; et &gt;.

&lt;div&gt;toto&lt;/div&gt; dans le code HTML donnera à l'affichage dans le navigateur <div>toto</div>.

Pour la coloration syntaxique, tu peux faire ça avec des span.

Pardon si je n'ai dit que des évidences et bonne continuation.
Modifié par thierry (24 Oct 2013 - 00:35)

Bonjour,

Je vous remercie pour vos réponses, très appréciées. Je vais pouvoir creuser dans les directions indiquées. Bien cordialement.