Is it possible to port this as a Jekyll plugin? #9
Comments
It's possible to setup jekyll to use github actions workflow Disable highlighting in kramdown:
highlighter: none
syntax_highlighter: none Then you can place a plugin in 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) |
nokogiri 🤔 |
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 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 |
Thanks!! Btw, I added you on discord (just in case you may think it's spam) 😉 |
Already accepted ;) |
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). |
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) |
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. |
To supersede the shitty pygments and rouge. I believe tree-sitter is gonna make some change.
The text was updated successfully, but these errors were encountered: