I trained a small model to do syntax highlighting in the browser with GPU. Meet gpu-lexer from Vercel Labs: Small (27.5KB), fast (runs on WebGPU), and language-agnostic (model guesses the syntax). It is experimental and built for learning!

Perf is good thanks to WebGPU, especially when the source is large. Also it doesn’t block the main CPU thread. Keep in mind that all highlighters have different pipelines and use cases. This project can’t yet be used to fully replace any.

Size is also impressive considering that it’s trained with 50+ languages (and it behaves okay for languages outside of the training group). The model itself is like 70% of the lib, inlined in the bundle.

Correctness. I’m comparing every span types with Shiki, which is almost the golden standard today. It shows the weighted correctness of top 25 popular languages on GitHub. Shiki uses real AST while others might not, hence the differences.

Why creating this? I’ve been struggling with syntax highlighting for years mostly because: 1) large language grammar bundles; 2) language detection and dynamic loading; 3) bad perf and slow down of main app. And it’s great to explore more possibilities and share!

using matrix multiplication to turn the word function yellow is truly what alan turing died for

🤯

shu you are my hero

Evil you’re mine too

🤍🫂

My new js-syntax-highlight-html.wasm is faster for three.min.js and gets within 99.9% agreement with Shiki. I really love the language-agnostic model idea so I’m fascinated to see how that evolves.

Looks amazing & wasm makes a lot of sense, this is the way for accurate highlighting.

I’m really excited to see how gpu-lexer evolves, I think I see it’s already updated on your site so I’m comparing again. I’m also curious if a small model executing on WebAssembly could be viable, especially with SIMD!

frickin awesome

That’s right, syntax highlighting goes into the transformer hole.

IDK man its not that good.

Marvellous! I'm particularly interested in how you trained it. Would you mind sharing it someday?

Is this open source? Where do I download the model? Is there a NPM package I can install?

This is wild, nice work!

Thanks Evan!

this is so cool

This is sick!

this is crazy work man, you're cooking as always !!

@cramforce Incredible! Vid looks class to what did you use?

@cramforce It's made with

Will you share the process?

wow

Great experiment, but when I look at examples on cpp and haskell, its highlighting is pretty poor and inconsistent, and I think those languages should benefit most from such an approach for syntax highlighting, as normal ways cannot handle those complex and extendable syntaxes.

Incredible 🤯 -- r u planning on writing article on the training process ?

this is awesome! it's a shame it doesn't too well with tsrx though :(

I can re-train it with some examples!

that would be amazing! you can find plenty of examples here thank you!

very nice

this is really really good and impressive

Insaneeeeee.

🐐

27KB GPU syntax highlighter in-browser — language-agnostic lexing is the part I want to steal.

this is so dope dude would love more details on how you trained the model

27.5KB doing syntax highlighting in-browser on WebGPU is the demo that sticks. once the model is a local primitive you ship with the page, latency and privacy stop being product features you apologize for.

very cool

Dude... what!? Incredible. Can you share your process for this?

additionally - would be cool to have stories like this in aiconf asia -

this is so cool

or we could just use hljs?

Now that's pretty damn cool

magic!

Many programming languages are context-sensitive so I imagine the attention of language models is a perfect fit. Very cool stuff!