💡 Universal syntax highlighter. In a <textarea> In 2026 (Chrome 152+), you can syntax-highlight different programming languages within the same <textarea> and get decent results Using the 🆕 OpaqueRange web API Works for <textarea>, even <input> Demo:

Afaik the original demo uses <pre contenteditable="plaintext-only"> + Range + CSS Custom Highlights But we can now syntax-highlight <textarea> + <input> too, using OpaqueRange Check @hypeddev article for more details here:

My demo is entirely vibe-coded; I just had the idea to give it a try Astra coded this and improved it from the original demo: highlights do not erase as you type

This is amazing, finally!

Yes! Seems like the lightweight future of syntax highlighting. The model is already quite nice for an experiment

would it be possible to train the model in a way that it supports mixing different languages? e.g. here the css highlighting is quite random:

I don't know, question for @shuding How does it behave with the same Css without mixing it?

@hunghg255 Wow 😮

Somebody get this on Github Issues and PRs

Textarea finally catching up to what editors already do

how stable are gpu-lexer token classes between edits? color flicker matters more than speed

I'll take native selection and undo with a bit of syntax colour for a small code field any day

Best part is you keep the native undo stack and spellcheck, which the old overlay-div highlighting trick always gave up.