Is it possible to port this as a Jekyll plugin?

[ice1000]

To supersede the shitty pygments and rouge. I believe tree-sitter is gonna make some change.

[MolotovCherry]

It's possible to setup jekyll to use github actions workflow https://jekyllrb.com/docs/continuous-integration/github-actions/

Disable highlighting in _config.yml

kramdown:
  highlighter: none
  syntax_highlighter: none

Then you can place a plugin in _plugins that implements this highlighter using your own markdown Converter (I recommend using Nokogiri for it) https://jekyllrb.com/docs/plugins/converters/

Kramdown will generate this, which you can parse and change the DOM using nokogiri

<pre>
    <code class="language-foo"></code>
</pre>

(Although, arguably, this plugin is seemingly impossible to actually set up and use. So I'm just going to use the wasm javascript highlighter instead)

[ice1000]

nokogiri :thinking:

[MolotovCherry]

Although side issue is that this plugin is so old and outdated, and building it is next to impossible. The latest tree sitter uses Rust, js, and WASM, so I'll just use that at runtime in the browser instead

[ice1000]

Although side issue is that this plugin is so old and outdated, and building it is next to impossible. The latest tree sitter uses Rust, js, and WASM, so I'll just use that at runtime in the browser instead

Do you have some sample project for referential purposes? I know neither Rust, js, or wasm. I'm new to programming.

[MolotovCherry]

Although side issue is that this plugin is so old and outdated, and building it is next to impossible. The latest tree sitter uses Rust, js, and WASM, so I'll just use that at runtime in the browser instead

Do you have some sample project for referential purposes? I know neither Rust, js, or wasm. I'm new to programming.

Actually, it couldn't be simpler. just see this link and it'll explain itself. You can download the prebuilt wasm and js from the releases, so you don't have to know anything about Rust to use it https://github.com/tree-sitter/tree-sitter/blob/master/lib/binding_web/README.md

Using this, you can avoid making a Ruby plugin. Just set the config to use no syntax highlighting as usual, then do your parsing in the browser on the element using the above link. Should be a fair bit easier

Just the usual css query like document.querySelectorAll('pre.code'), loop over the elements in js, call the highlighter on the code

[ice1000]

Thanks!!

Btw, I added you on discord (just in case you may think it's spam) :wink:

[MolotovCherry]

Thanks!!

Btw, I added you on discord (just in case you may think it's spam) 😉

Already accepted ;)

[nighthawk]

Just came across this. Would love to do the same thing. Is there a code snippet for the different steps, in particular how to call tree-sitter to tell it to syntax highlight my Jekyll post?

[MolotovCherry]

Just came across this. Would love to do the same thing. Is there a code snippet for the different steps, in particular how to call tree-sitter to tell it to syntax highlight my Jekyll post?

tree-sitter modules can be built into wasm and linked to js and everything successfully. But unfortunately, there's no highlighting built directly into the wasm module. There's a separate rust highlighting lib for it, but building Rust + C wasm together with emscripten proved to not be trivial.

It is however possible to write a js highlighter that uses the information it parsed using tree-sitter wasm. However, there's no batteries included option right now, and you'll have to write the js highlighter yourself. The rust highlighter is a no-go right now (not without extensive work).

[nighthawk]

Thanks for the pointer, that was helpful!

After a lot of trial and error, I ended up with a simple JS highlighter. I wrote up how I did it, in case it's useful for anyone else.

[MolotovCherry]

Thanks for the pointer, that was helpful!

After a lot of trial and error, I ended up with a simple JS highlighter. I wrote up how I did it, in case it's useful for anyone else.

Thanks for the write-up! I followed your guide to finish the implementation on my end. It was very helpful to more quickly finish it for me!

(You might want to note in your guide that the latest tree sitter js and wasm needs to be rebuilt using the latest emscripten if you build your language wasm files using the newest emscripten. Otherwise it won't work due to an incompatibility)

[andrewtbiehl]

I was also looking for a way to integrate Tree-sitter into Jekyll and eventually came up with a solution more akin to the initial suggestion on this thread.

Here is a how-to blog post I wrote about it, in case it would be helpful/interesting for anyone :)

---

Update: I packaged this concept into a plugin! It's technically a Kramdown plugin, but it's not too hard to integrate it into a Jekyll project (as explained in the usage guide). It currently has MVP functionality, but I hope to build it out more over time.