5572 sujets

Sémantique web et HTML

Comment appliquer la couleur syntaxique au code ?

Bonjour a vous tous,

Petit voeux chinois : "Que les puces de mille chiens galeux infestent le cul de celui qui vous gâchera une seule seconde de votre année 2025 et que ses bras deviennent trop courts pour qu'il puisse se le gratter." Plus sérieusement, bonne année et tout plein de bonnes choses à vous tous.

Je souhaiterai savoir s'il existe un moyen de coloriser le code comme c'est le cas dans VSCode, sans avoir à ajouter des <span> à tout bout de champ. Je voudrais ainsi obtenir ce ci, par exemple :
upload/1735718994-62242-capturedncran2025-01-01090941.png
Il me semble que j'ai déjà posé cette question auparavant mais je ne parviens plus à retrouver le post. Quelqu'un m'avait répondu qu'il fallait utiliser un lien qui coloriserait le code automatiquement mais je ne sais plus quel est ce lien.
Quelqu'un saurait m'orienter ?
Modifié par ObiJuanKenobi (01 Jan 2025 - 09:13)
Je me suis mal exprimé, ce n'est pas le code dans les éditeurs de texte que je cherche à colorier, c'est le code dans une page HTML affiché avec les balises <pre> ou <code> que je veux colorier. Par défaut, ces deux balises se contentete d'afficher le code (et non l'exécuter). Mais après, je voudrais que les différentes balises, attributs, valeurs, commentaires, etc. soient colorés, comme dans les éditeurs de code.
Modérateur
Bonjour,
ObiJuanKenobi a écrit :
Je me suis mal exprimé, ce n'est pas le code dans les éditeurs de texte que je cherche à colorier, c'est le code dans une page HTML affiché avec les balises &lt;pre&gt; ou &lt;code&gt; que je veux colorier. Par défaut, ces deux balises se contentete d'afficher le code (et non l'exécuter). Mais après, je voudrais que les différentes balises, attributs, valeurs, commentaires, etc. soient colorés, comme dans les éditeurs de code.

C'est tout à fait ce que @casper2 te propose.
casper2 a écrit :
Bonjour, si tu souhaites afficher du code sur une page web avec coloration syntaxique il existe plusieurs solution en utilisant du JS.
https://highlightjs.org/
https://prismjs.com/
https://www.alsacreations.com/astuce/lire/1476-Prism---coloration-syntaxique.html
Bonne année à tous.


La colorisation du code se fait à la volée par javaScript.
Plusieurs script existent et scannent les contenus des balises code. La colorisation se fait en encapsulant chaque portion de texte identifié dans une balise html avec une class.
Les modifications ne sont faites que dans le navigateur du visiteur.
Chaque script a ses particularité . highlightsjs et prism sont peut-être les deux plus utilisés, mais il y en a d'autre, comme rainbow ou syntaxHighlighter .

Bonne Année à tous !
gcyrillus a écrit :
C'est tout à fait ce que @casper2 te propose.


J'ai oublié de préciser que je répondais à drphilgood et non à casper2.
Je commence mal cette nouvelle année !
Modifié par ObiJuanKenobi (01 Jan 2025 - 12:39)
Ha, je suis bouleversifié de ne pas avoir compris la question.
je retourne dormir.
Bonne année à tous !

Un exemple tiré d'une de mes pages web avec Prism.js : https://scriptura.github.io/page/codeBlocks.html

La différence avec Highlight.js étant que, pour ce dernier, il n'y a pas obligation de déclarer la syntaxe, la lib' va détecter le type de code en fonction de la syntaxe à coloriser. Pratique pour un forum pour lequel les utilisateurs ne sont pas toujours disciplinés pour définir leur tag.
RE : je viens de me faire un npm trends et constate que Prism est en légère perte de vitesse. En creusant un peu plus on s'aperçoit que, malgré l'apparition timide d'une version 2, le projet qui avait bénéficié d'une hype (grâce au prestige de Léa Verrou) n'est plus activement maintenu. Ce qui n'est pas le cas de Highlight.js.

J'opterais donc pour ce dernier à priori... à moins que je ne sois tenté par l'étoile montante qu'est shiki, porté par Nuxt.js (je l'ai mis aussi en statistique dans le npm trends). Ce dernier optimise le rendu en le générant côté serveur. Pour en savoir plus sur lui voir cet article : https://nuxt.com/blog/shiki-v1
Modifié par Olivier C (02 Jan 2025 - 13:24)
Prévenir un modérateur
Répondre au sujet
Aller à