jquery.app
Francais
EnglishDeutschFrancaisEspanol日本語Nederlands

Outils HTML

Gratuit Generateur API Custom Highlights

Generez des pseudo-elements CSS ::highlight() et des objets Highlight JavaScript pour styliser des plages de texte sans modifier le DOM.

Chargement de l'outil...

Qu'est-ce que Generateur API Custom Highlights ?

L'API Custom Highlights (Baseline 2026, Chrome 105+) style des plages de texte sans modifier le DOM. Les Range sont enregistres dans CSS.highlights et styles avec ::highlight(). Ideal pour le surlignage de recherche et la coloration syntaxique.

Réponse rapide

Surlignage de texte sans modification du DOM avec CSS.highlights et ::highlight(). Chrome 105+, Safari 18.2+.

Last updated: 2026-06-02

Limites

  • Chrome 105+, Safari 18.2+ seulement. Firefox non supporte.
  • Proprietes CSS limitees pour ::highlight().
  • Pas de mise a jour automatique apres mutation DOM.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Comment utiliser cet outil

  1. Ecrivez ou collez le texte.
  2. Configurez le nom du highlight et les motifs.
  3. Personnalisez le style (fond, couleur, soulignement).
  4. Copiez le JavaScript et CSS generes.

A quoi il sert

  • Surlignage de recherche sans pollution du DOM.
  • Coloration syntaxique de blocs de code.
  • Comparaison de texte avec highlights colores.

Cas d'usage

Exemples concrets

Exemple

Surlignage de recherche

Range pour chaque occurrence, CSS.highlights.set('search-match'), ::highlight(search-match) avec fond jaune.

Exemple

Coloration syntaxique multicolore

Trois highlights nommes : mots-cles (bleu), chaines (vert), commentaires (gris).

Erreurs frequentes

  • Utiliser des highlights sur des elements non connectes au DOM.
  • Supposer que ::highlight() supporte toutes les proprietes CSS.
  • Oublier que les highlights sont purement visuels.

Vérification

  1. Tapez un terme de recherche, verifiez le surlignage sans span dans le DOM.
  2. CSS.highlights.keys() doit retourner le nom du highlight.

FAQ

Questions sur Generateur API Custom Highlights

Difference avec les spans?

Les highlights creent des Range sans modifier l'arbre DOM, invisibles pour l'accessibilite.

Texte sur plusieurs elements?

Non, un seul Text node par highlight. Creez des highlights separes pour chaque segment.

Mise a jour apres changement DOM?

Les highlights doivent etre recreees apres les mutations DOM.

Support navigateur?

Chrome 105+, Safari 18.2+. Pas Firefox. Repli span necessaire.

Outils lies

Autres outils outils html

A essayer aussi

A essayer aussi