{"id":6686,"date":"2025-08-07T08:45:02","date_gmt":"2025-08-07T13:45:02","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=6686"},"modified":"2025-08-07T08:45:03","modified_gmt":"2025-08-07T13:45:03","slug":"using-the-custom-highlight-api","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/using-the-custom-highlight-api\/","title":{"rendered":"Using the Custom Highlight API"},"content":{"rendered":"\n

The Custom Highlight API<\/a> came to my attention recently as Firefox recently started supporting<\/a> it (Firefox 140, June 2025), which brought support across all the major browsers. With it, you can apply (some) styling to text that you get your hands on in JavaScript via the Range()<\/code> class. I would say text that you select<\/em>, but there aren’t really normal selectors involved here, making it rather unusual to work with for a CSS guy like me.<\/p>\n\n\n\n

I think a basic word explanation is helpful here, as it sure would have helped me when I first started poking at it<\/a>:<\/p>\n\n\n\n

    \n
  1. You need a textNode<\/code>1<\/a><\/sup>. (e.g. document.querySelector(\"p\").firstChild<\/code>)<\/li>\n\n\n\n
  2. Then you need a Range()<\/code> in which you do a setStart<\/code> and setEnd<\/code> on, meaning the range is now between those two integers.<\/li>\n\n\n\n
  3. Then you call CSS.highlights.set()<\/code> on that Range, giving it a name.<\/li>\n\n\n\n
  4. Then you use ::highlight()<\/code>in CSS, passing in that name you just used.<\/li>\n<\/ol>\n\n\n\n

    If we had one <p><\/code> of text on a page, that whole process looks like this:<\/p>\n\n\n

    const<\/span> WORD_TO_HIGHLIGHT = \"wisdom\"<\/span>;\nconst<\/span> NAME_OF_HIGHLIGHT = \"our-highlight\"<\/span>;\n\nconst<\/span> textNode = document<\/span>.querySelector(\"p\"<\/span>).firstChild;\nconst<\/span> textContent = textNode.textContent;\n\nconst<\/span> startIndex = textContent.indexOf(WORD_TO_HIGHLIGHT);\nconst<\/span> endIndex = startIndex + WORD_TO_HIGHLIGHT.length;\n\nconst<\/span> range = new<\/span> Range();\nrange.setStart(textNode, startIndex);\nrange.setEnd(textNode, endIndex);\n\nconst<\/span> highlight = new<\/span> Highlight(range);\nCSS.highlights.set(NAME_OF_HIGHLIGHT, highlight);<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    This is neat to see in DevTools, where the word “wisdom” clearly has custom CSS styling applied to it, but there is no element around that word that you’d normally think would be necessary to apply those styles.<\/p>\n\n\n
    \n
    \"\"<\/figure>\n<\/div>\n\n\n
    It’s likely what the browser itself does when it needs to apply styling to only certain parts of text, like it does when you use the Find <\/em><\/strong>feature baked into browsers.<\/p>\n\n\n
    \n
    \"\"<\/figure>\n<\/div>\n\n\n
    Here’s that demo:<\/p>\n\n\n\n