What a genius this dev is. Just a few weeks ago I tried to do something very similar for my blog, but quickly gave up as it’s not easy to do! Kudos to the author, they did an awesome job and went beyond by actually fixing up even the grammars and highlighting queries so it all works perfectly!
I suppose this isn't the case here, but found it funny how these 3 successive positive comments read almost exactly like those bot comment chains that I see on other platforms trying to pull people into crypto scams.
But does it support editing highlighted text? If not, one would have to do some trickery by hiding a textarea and updating the <code> element on each keypress, I guess. Which probably has a thousand corner cases one would have to deal with.
The example on their website is editable and it looks like they overlay the highlighted output on top of the textarea with `pointer-events: none` like you mentioned.
Hmm .. and the approach already shows its weaknesses when I play with it: When I search for something on the page, it gives me twice as many hits as there are. And jumps around two times to each hit when I use the "next" button.
There is a neat `inert` html attribute you can use to disable all interactions as well as hide the text from ctrl+f searches. (Sadly Safari is the weird one out, and does not exclude the content from searches.)
Completely appalled to learn that docs.rs lets you inject any html/css/js you want into the live site (on pages documenting your crate). I love the flexibility but shudder at the security hole the size of, oh, I don’t know, the Grand Canyon.
I've been toying around with tree-sitter and have seen the potential for a proper, non-regex based highlighter. It's really powerful because it actually parses the text into an AST. With the AST it's possible for example to make variables the same colour everywhere. A function passed as a parameter could be highlighted as a function even in the parameter list.
I'm happy to see that tree sitter highlighting on the web is finally a thing. This seems really solid although the bundle size is a lot.
Daaang! On the one hand, as someone developing a code-example custom element[0] that includes highlighting, this is kind of a "so close, but not quite" situation where I really wish this was something I could use for that, but it's probably too heavy to ship around for something so "simple" (as far as users' default expectation; not implying that highlighting text is simple).
But then, on the other hand, I had given up on a scratch code editor for a game development project I'm working on, and just loosely wrapped up the monaco editor which I'm guessing is going to be pretty bare when I actually get around to trying to code with it, in browser (I'm aware that it is robust, but from what I gather, a lot of its features come from third-party dev as a way to keep the core functionality pure). Given that I want to be able to script in C# (aside from just js/ts), I was sure I was going to have to figure something complicated out.
But, honestly, I think this solves all of my most concerning issues! What a sweet little library!
[0] https://magnitce-code-example-e81613.gitlab.io/ (please excuse the unfinished-ness; I'm working on a JSDoc-to-documentation library that automates the documentation for me so there are minor issues, like the install text not changing on selection)
If you haven't tried building a grammar with tree-sitter, I highly recommend you do so. It's incredibly fun once you get into a flow state. The docs call it a zen-like experience, and that's a perfect way to describe it. It's so, so good.
Tree-sitter is a parser generator tool and an incremental parsing library. It can build a concrete syntax tree for a source file and efficiently update the syntax tree as the source file is edited.
Tree-sitter produces more accurate highlighting tho. We used syntect for our web editing cos it’s faster (and lighter in terms of size) and tree-sitter for rendered pages in our company and the difference is stark
Great project, I really love tree-sitter, recently I added a ini variant config profile support to my app, and just use gemini to write a grammar and combine it with another great project called runestone to support highlight the config profile, the total progress is quite smooth.
Sorry, but I can't understand what this actually is. A library, a stand-alone tool, a Rust crate? What users does it target? Text editors, website creators?
It's a Rust library (comprised of a bunch of crates) that wraps a high-performance, high-accuracy syntax highlighter (called Tree-sitter) with vetted support for almost 100 programming/markup languages.
You can use it as a normal Rust library, or you can use the JavaScript/WASM wrapper to highlight source code on a web page.
Just wanted to note that tree-sitter is lower-level and more general: it's an incremental parser that is specialised for gracefully and efficiently parsing partially-correct code snippets or code being edited live.
It's an important building block of the highlighter, but it needs more on top to complete the package. It can be used for anything that requires awareness of code structure in an editor.
If only it were usable for really-correct parsing. In my experience error recovery is so aggressive it will accept broken ASTs without marking any node as an error. Plus, you can't really solve some ambiguities without C-based lexer hacks.
I wonder if targeting the Tree-sitter ABI directly could be a viable way to write more accurate parsers in an actual programming language while piggybacking on the ecosystem. Could tree-sitter's runtime ABI be adapted for GLL parsers instead of GLR? I haven't looked deep into it yet.
Now you're in my wheelhouse! Come check out https://github.com/bablr-lang/. I'm gearing up for a big release announcement here once I fix these bugs and ship all the latest code.
> Batteries-included tree-sitter grammar collection with HTML rendering and WASM support.
That's the best one sentence description there is and it's at the top of the Github README. I think that would fit nice at the top of https://arborium.bearcove.eu too
https://fasterthanli.me/articles/my-gift-to-the-rust-docs-te... is a better link (the author's article about this rather than the artifact produced)
What a genius this dev is. Just a few weeks ago I tried to do something very similar for my blog, but quickly gave up as it’s not easy to do! Kudos to the author, they did an awesome job and went beyond by actually fixing up even the grammars and highlighting queries so it all works perfectly!
I agree! Not only do they write engaging blog posts, they also produce engaging videos!
https://youtube.com/@fasterthanlime
I suppose this isn't the case here, but found it funny how these 3 successive positive comments read almost exactly like those bot comment chains that I see on other platforms trying to pull people into crypto scams.
Some people just genuinely deserve praise.
Haha, I confess I did sound like a bot... but sorry to disappoint, I am human!
That's what a bot would typically say.
On this side, I'm not a bot, and fortunately even in 2025 nobody on the internet knows that you are a dog.
I think I sound a bit like a bot because half of what I read on the Internet is actually written by bots and that is influencing me!
woof, woof!
I'm currently building an online 3D-Editor that supports OpenSCAD and Python as the input language.
The ease of use to highlight static text via Arborium seems nice:
But does it support editing highlighted text? If not, one would have to do some trickery by hiding a textarea and updating the <code> element on each keypress, I guess. Which probably has a thousand corner cases one would have to deal with.And how would one add SCAD support?
The example on their website is editable and it looks like they overlay the highlighted output on top of the textarea with `pointer-events: none` like you mentioned.
The code isn't minified so you can see how they do it by looking at the `doHighlight()` function here https://arborium.bearcove.eu/pkg/app.generated.js
Oh, you are right!
Hmm .. and the approach already shows its weaknesses when I play with it: When I search for something on the page, it gives me twice as many hits as there are. And jumps around two times to each hit when I use the "next" button.
I wonder if that is fixable.
There is a neat `inert` html attribute you can use to disable all interactions as well as hide the text from ctrl+f searches. (Sadly Safari is the weird one out, and does not exclude the content from searches.)
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...
GitHub had to solve the same problem when speeding up there code viewer.
https://github.blog/engineering/architecture-optimization/cr...
One simply needs the Highlight API. I held back, but now even Firefox ESR supports it.
https://developer.mozilla.org/en-US/docs/Web/API/Highlight
All the trickery vanishes and you get first-class CSS support.
And there's an open issue for that already: https://github.com/bearcove/arborium/issues/62
That works on the text inside a textarea? Is there a demo showcasing this somewhere?
I’m now just curious about your project
Give me a few more weeks and I will probably have something online. You can find me on social media or feel free to connect via email.
Completely appalled to learn that docs.rs lets you inject any html/css/js you want into the live site (on pages documenting your crate). I love the flexibility but shudder at the security hole the size of, oh, I don’t know, the Grand Canyon.
It’s not a new discovery, I just didn’t know docs.rs (intentionally) wasn’t blocking this. Cf https://docs.rs/pwnies/0.0.13/pwnies/
(This all makes more sense if you read the blog post instead of the direct arborium link: https://fasterthanli.me/articles/my-gift-to-the-rust-docs-te...)
I've been toying around with tree-sitter and have seen the potential for a proper, non-regex based highlighter. It's really powerful because it actually parses the text into an AST. With the AST it's possible for example to make variables the same colour everywhere. A function passed as a parameter could be highlighted as a function even in the parameter list.
I'm happy to see that tree sitter highlighting on the web is finally a thing. This seems really solid although the bundle size is a lot.
Daaang! On the one hand, as someone developing a code-example custom element[0] that includes highlighting, this is kind of a "so close, but not quite" situation where I really wish this was something I could use for that, but it's probably too heavy to ship around for something so "simple" (as far as users' default expectation; not implying that highlighting text is simple).
But then, on the other hand, I had given up on a scratch code editor for a game development project I'm working on, and just loosely wrapped up the monaco editor which I'm guessing is going to be pretty bare when I actually get around to trying to code with it, in browser (I'm aware that it is robust, but from what I gather, a lot of its features come from third-party dev as a way to keep the core functionality pure). Given that I want to be able to script in C# (aside from just js/ts), I was sure I was going to have to figure something complicated out.
But, honestly, I think this solves all of my most concerning issues! What a sweet little library!
[0] https://magnitce-code-example-e81613.gitlab.io/ (please excuse the unfinished-ness; I'm working on a JSDoc-to-documentation library that automates the documentation for me so there are minor issues, like the install text not changing on selection)
The sponsorships achieved by the author is admirable - they really make a lot of valuable oss.
https://github.com/sponsors/fasterthanlime
If you haven't tried building a grammar with tree-sitter, I highly recommend you do so. It's incredibly fun once you get into a flow state. The docs call it a zen-like experience, and that's a perfect way to describe it. It's so, so good.
Treesitter is fantastic. It has builtin support in nvim, and there are a lot of plugins that make use of it.
My favorite is nvim-treesitter-textobjects which gives you dozens of new targets for vim motions, such as a function call or the condition of a loop.
Tree-sitter:
Tree-sitter is a parser generator tool and an incremental parsing library. It can build a concrete syntax tree for a source file and efficiently update the syntax tree as the source file is edited.
There's also a pure-Rust implementation of a syntax highlighter, which uses TextMate/SublimeText grammars: https://lib.rs/syntect
Tree-sitter produces more accurate highlighting tho. We used syntect for our web editing cos it’s faster (and lighter in terms of size) and tree-sitter for rendered pages in our company and the difference is stark
This is cool! How does it compares with Shiki or Highlighter.js in terms of performance?
Great project, I really love tree-sitter, recently I added a ini variant config profile support to my app, and just use gemini to write a grammar and combine it with another great project called runestone to support highlight the config profile, the total progress is quite smooth.
I had to wait for about 10 seconds for it to load on my crappy mobile connection.
They also load 1 mb of fonts. In total, this page is close to 3 mb.
Also, when you select a language, the grammar file gets downloaded twice.
Sorry, but I can't understand what this actually is. A library, a stand-alone tool, a Rust crate? What users does it target? Text editors, website creators?
It's a Rust library (comprised of a bunch of crates) that wraps a high-performance, high-accuracy syntax highlighter (called Tree-sitter) with vetted support for almost 100 programming/markup languages.
You can use it as a normal Rust library, or you can use the JavaScript/WASM wrapper to highlight source code on a web page.
> high-accuracy syntax highlighter (called Tree-sitter)
Just wanted to note that tree-sitter is lower-level and more general: it's an incremental parser that is specialised for gracefully and efficiently parsing partially-correct code snippets or code being edited live.
It's an important building block of the highlighter, but it needs more on top to complete the package. It can be used for anything that requires awareness of code structure in an editor.
If only it were usable for really-correct parsing. In my experience error recovery is so aggressive it will accept broken ASTs without marking any node as an error. Plus, you can't really solve some ambiguities without C-based lexer hacks.
I wonder if targeting the Tree-sitter ABI directly could be a viable way to write more accurate parsers in an actual programming language while piggybacking on the ecosystem. Could tree-sitter's runtime ABI be adapted for GLL parsers instead of GLR? I haven't looked deep into it yet.
Now you're in my wheelhouse! Come check out https://github.com/bablr-lang/. I'm gearing up for a big release announcement here once I fix these bugs and ship all the latest code.
Thanks for the correction!
Is the 'regex hater club' subtitle related to using regex to 'parse' rather than using something like tree-sitter that actually parses?
I also had a hard time understanding the context given just the link.
See https://fasterthanli.me/articles/my-gift-to-the-rust-docs-te...
GitHub repo is a bit more helpful, but users or building of text editors that use tree-sitter.
Or... website text editors which historically have had imperfect syntax highlighting.
Notice the Zed sponsorship.
https://github.com/bearcove/arborium
> Batteries-included tree-sitter grammar collection with HTML rendering and WASM support.
That's the best one sentence description there is and it's at the top of the Github README. I think that would fit nice at the top of https://arborium.bearcove.eu too
I think this gives some context?:https://fasterthanli.me/articles/my-gift-to-the-rust-docs-te... TLDR: for rust doc highlighting stuff in document
Not for you then. You don't need to understand everything.
The get started section seems to be broken or missing content.
This is cool, was looking for something similar