Repo: https://github.com/marianoguerra-atik/ohm-highlight Demo: https://marianoguerra-atik.github.io/ohm-highlight/

I love this exploration because the official docs don’t mention this use case specifically. There it’s more about highlighting search terms. So thanks for showing it with syntax highlighting!

This API might also make my fairly recent implementation of Typeahead a lot simpler lol. https://blog.florianschulz.info/2025/10/typeahead/ Ah, although the ::highlight selector does not support all CSS properties.

border-radius

is not supported. Buuuut… I will still try to make an alternative implementation with less JavaScript and simpler styling.

I really like your approach as we now get away without a giant soup of span elements for basic syntax highlighting. On the other hand I wonder how/if we can still make the ranges interactive, e.g to show tooltips? Can we map x/y to a highlighted range? Edit: Looks like this is in the making: HighlightRegistry: highlightsFromPoint() method https://developer.mozilla.org/en-US/docs/Web/API/HighlightRegistry/highlightsFromPoint