Wat is Custom Highlights API Generator?
De Custom Highlights API biedt een manier om tekstreeksen in de browser te stylen zonder de DOM te wijzigen. In plaats van tekst in span-elementen te wrappen, maakt u Range-objecten, verzamelt u ze in een Highlight-object en registreert u dit in de CSS.highlights-registry. Het ::highlight()-pseudo-element past vervolgens stijlen toe op die reeksen. Omdat highlights de DOM niet wijzigen, zijn ze ideaal voor tijdelijke visuele effecten zoals zoekmarkering en syntax highlighting.
Snel antwoord
De Custom Highlights API stileert tekstreeksen via CSS zonder DOM-wijzigingen. Gebruik CSS.highlights.set() om benoemde highlights te registreren en ::highlight() voor styling. Chrome 105+, Safari 18.2+. Ideaal voor zoekmarkering en syntax highlighting.
Last updated: 2026-06-02
Beperkingen
- Browserondersteuning: Chrome 105+, Edge 105+ en Safari 18.2+. Firefox wordt niet ondersteund.
- ::highlight() ondersteunt een beperkte set CSS-attributen.
- Highlights worden niet automatisch bijgewerkt bij DOM-wijzigingen.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
Zo gebruik je deze tool
- Voer tekst in of gebruik de voorbeeldtekst in de tool.
- Configureer de highlight-naam en tekstpatronen om te markeren.
- Pas de highlight-styling aan: achtergrondkleur, tekstkleur en text-decoration.
- Kopieer de JavaScript- en CSS-code voor een zelfstandig voorbeeld.
Waarvoor je het kunt gebruiken
- Implementeer zoekmarkering op een pagina zonder span-elementen aan de DOM toe te voegen.
- Voeg syntax highlighting toe aan codeblokken met highlights voor trefwoorden en strings.
- Bouw een tekstvergelijkingstool met verschillende highlight-kleuren voor toevoegingen en verwijderingen.