BUT THERE IS ANOTHER WAY. Bramus digs into it nicely here.

Brass tacks, there is a Highlight() API in JavaScript, where you can set a Range() on text, then give it a name. Then in CSS, you can select that highlight with ::highlight(name) and colorize it. This is useful for simple use cases like building on-page search yourself, but is everything you need for even something as elaborate as syntax highlighting.

I would have guessed this would be a real boon for performance, with so much less HTML required and really no DOM manipulation at all. But as Bramus points out, the performance actually have some problems. Would be nice to see some actual benchmarks. There are variety of other downsides too, like being quite limited in styling (like ::selection) and not having pointer events to do things like hover styles or positioned popups.

To me it seems like the biggest downside is that you could never do this server-side, which is almost certainly a performance win, whereas you can do the make-a-bunch-of-spans style highlighting server-side.