Top
Best
New

Posted by zdw 22 hours ago

Arborium: Tree-sitter code highlighting with Native and WASM targets(arborium.bearcove.eu)
216 points | 42 comments
joshka 19 hours ago|
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)
brabel 18 hours ago|
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!
solarkraft 15 hours ago||
I agree! Not only do they write engaging blog posts, they also produce engaging videos!

https://youtube.com/@fasterthanlime

falcor84 12 hours ago||
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.
tombh 12 hours ago|||
Some people just genuinely deserve praise.
brabel 8 hours ago|||
Haha, I confess I did sound like a bot... but sorry to disappoint, I am human!
psychoslave 7 hours ago||
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.

ComputerGuru 7 hours ago||
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...)

mg 19 hours ago||
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:

    <script src="arborium.iife.js"></script>
    <pre><code class="language-python">
        def hello(name):
            print("Hello " + name);
    </code></pre>
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?

debazel 15 hours ago||
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

mg 11 hours ago||
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.

debazel 8 hours ago|||
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/...

knallfrosch 9 hours ago||||
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.

bakkoting 4 hours ago||
And there's an open issue for that already: https://github.com/bearcove/arborium/issues/62
fsfod 6 hours ago|||
GitHub had to solve the same problem when speeding up there code viewer.

https://github.blog/engineering/architecture-optimization/cr...

metmac 13 hours ago||
I’m now just curious about your project
mg 11 hours ago||
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.
catapart 8 hours ago||
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)

aarol 16 hours ago||
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.

jasonjmcghee 19 hours ago||
The sponsorships achieved by the author is admirable - they really make a lot of valuable oss.

https://github.com/sponsors/fasterthanlime

danielvaughn 11 hours ago||
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.
pseudo_meta 17 hours ago||
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.

pornel 8 hours ago||
There's also a pure-Rust implementation of a syntax highlighter, which uses TextMate/SublimeText grammars: https://lib.rs/syntect
zeon256 6 hours ago|
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
Tepix 17 hours ago|
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.

More comments...