Better code highlighting with Tree-sitter

Hi Jekyll community!

I recently wrote a “how-to” article on integrating Tree-sitter into Jekyll to get better code highlighting on my site: “Syntax highlight your Jekyll site with Tree-sitter!”.

It was a fun challenge figuring out how to do things like get Ruby to call Tree-sitter’s Rust bindings. At the end of the article I also have some fun comparisons of Tree-sitter against Jekyll’s default highlighter, Rouge. I hope you find it as interesting as I did, and please let me know if you have questions or suggestions! Cheers!

3 Likes

While this may not be something I need, I want to congratulate you on your excellent write up. You are a very good teacher!

1 Like

Thank you very much for the kind words! :slight_smile:

1 Like

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

I’m really sorry for my dumb question.
The round border can be change via CSS or can I custom some display on my jekyll site?

No worries! Are you referring to the rounded borders on the code blocks on my blog? If so, then yeah those are definitely customizable via CSS. In the source code for my website, you can find the line that rounds the borders for all HTML code tags here.

The tutorial and plugin I wrote are mostly concerned with changing the style of the tokens inside a block of code, whereas styling the entire code block (like adding a border, changing the background color, etc.) can be achieved by adding CSS (or Sass) to the Jekyll site independently.

I hope that helps! :slight_smile:

1 Like

excellent, I can see much more future in this, thanks for hard work and share with us

1 Like