Arborium: Tree-sitter code highlighting with Native and WASM targets

Posted by zdw 10 hours ago

Comments

Comment by joshka 7 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)

Comment by brabel 6 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!

Comment by solarkraft 3 hours ago

I agree! Not only do they write engaging blog posts, they also produce engaging videos!

https://youtube.com/@fasterthanlime

Comment by falcor84 58 minutes 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.

Comment by tombh 48 minutes ago

Some people just genuinely deserve praise.

Comment by mg 7 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?

Comment by debazel 3 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

Comment by metmac 1 hour ago

I’m now just curious about your project

Comment by aarol 4 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.

Comment by Tepix 5 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.

Comment by jasonjmcghee 8 hours ago

The sponsorships achieved by the author is admirable - they really make a lot of valuable oss.

https://github.com/sponsors/fasterthanlime

Comment by pseudo_meta 5 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.

Comment by mintflow 5 hours ago

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.

Comment by teo_zero 8 hours ago

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?

Comment by GolDDranks 5 hours ago

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.

Comment by oersted 5 hours ago

> 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.

Comment by GolDDranks 4 hours ago

Thanks for the correction!

Comment by joshka 7 hours ago

See https://fasterthanli.me/articles/my-gift-to-the-rust-docs-te...

Comment by jasonjmcghee 8 hours ago

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

Comment by tombh 46 minutes ago

> 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

Comment by discord9 7 hours ago

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