[HN Gopher] Better code highlighting on the web: rehype-tree-sitter
       ___________________________________________________________________
        
       Better code highlighting on the web: rehype-tree-sitter
        
       Author : todsacerdoti
       Score  : 30 points
       Date   : 2023-07-24 21:01 UTC (1 hours ago)
        
 (HTM) web link (haz.ee)
 (TXT) w3m dump (haz.ee)
        
       | l5870uoo9y wrote:
       | Another contestant in this realm is Bright[1]. It runs entirely
       | on the server and doesn't increase bundle size as seen here[2].
       | Regarding parsing speed tree-sitter is without a doubt performant
       | since it is written in Rust, but I don't have any problems
       | "parsing on every keystroke" with a setup containing Marked[3],
       | highlight.js[4] and a sanitizer. I did however experience
       | performance issues with other Markdown parser libraries than
       | Marked.
       | 
       | [1]: https://bright.codehike.org/
       | 
       | [2]: https://aihelperbot.com/test-suite
       | 
       | [3]: https://github.com/markedjs/marked
       | 
       | [4]: https://highlightjs.org/
        
       | meitros wrote:
       | I'm looking into client-side syntax highlighting as well at the
       | moment and lezer popped up: https://lezer.codemirror.net/. It's
       | directly based on tree-sitter but tailored to be more web
       | friendly (and written by the same author as codemirror) -
       | https://marijnhaverbeke.nl/blog/lezer.html
        
         | dunham wrote:
         | I think I'd prefer Lezer in a javascript-only setting. The
         | results are compact and you don't have to deal with WASM.
         | 
         | I've written a small tree-sitter grammar, with off-side rule
         | even, and had a bunch of issues with the javascript bits not
         | being the same version as the WASM bits. I ended up having to
         | get just the right version of emscripten installed (and maybe a
         | few other tools). The process felt a bit fragile to me.
        
       | hyperhello wrote:
       | Is syntax highlighting considered difficult? A regex loop that
       | outputs HTML to a pre is a few lines of vanilla JS.
        
         | mrkeen wrote:
         | Please share.
        
           | hyperhello wrote:
           | I'm on my phone, so no code sample, but put a choice regex in
           | a variable and loop with .exec(), emitting that text
           | surrounded by span tags into an array that you then join().
           | It's really almost a one or two line script.
        
             | acedTrex wrote:
             | and for languages that have contextual keywords or semantic
             | highlighting needs?
        
               | hyperhello wrote:
               | You can either use CSS where it makes sense or you can
               | keep the regex results to refer to as needed instead of
               | throwing them out.
        
       | nullpt_rs wrote:
       | Definitely considering switching over my blog to Astro since I
       | write my posts in MDX and using this plugin to avoid doing this
       | work on the client at all (currently use highlight.js and Next).
       | 
       | Lovely work by my friend Haze :)
        
         | baby wrote:
         | Never heard of Astro[1] until today. I was looking for
         | something better than Hugo and ended up using Nuxt content. How
         | is this better than nuxt content :D ?
         | 
         | [1]: https://astro.build/
        
           | hazebooth wrote:
           | I haven't used 'Next Content', but one big difference is that
           | Astro is framework agnostic. I'm not a huge web dev so I
           | wouldn't know how different these frameworks are, but not
           | being locked in/being able to try another framework is cool
        
         | l5870uoo9y wrote:
         | NextJS does however offer an experimental Rust implementation
         | for parsing MDX which makes it a lot faster and less buggy to
         | use than setting it yourself with various Rehype and Remark
         | plugins. Using Rust parser with Bright[1] (if you don't need
         | other plugins like table of contents or Github Flavoured
         | Markdown) is a potent setup.
         | 
         | [1]: https://bright.codehike.org/
        
       ___________________________________________________________________
       (page generated 2023-07-24 23:00 UTC)