orgajs icon indicating copy to clipboard operation
orgajs copied to clipboard

Support alternate syntax highlighters (Shiki)

Open madeleinedaly opened this issue 4 years ago • 2 comments

First I just want to say, thank you for all the work you've done on this!

I'm curious about adding support for Shiki. It produces nicer looking (IMO) results than PrismJS, and since it uses TextMate language grammars internally, it can support many more languages than PrismJS by providing it with additional grammars. Shiki supports a lot of popular languages by default, but there are many other TextMate grammars out there that can be added too. (My specific use case is rendering code blocks in Forth, and certain assembly language syntaxes that Prism doesn't support either, like Z80, AVR, etc.)

I could see this potentially being configurable as a unified/rehype plugin like in #49.

madeleinedaly avatar Jan 03 '21 17:01 madeleinedaly

I'm currently painfully hacking my way through it to get this working. I think it would benefit us all to simply swap highlight -> shiki, if not support for configurable parsers.

andycandy-dev avatar Aug 26 '21 09:08 andycandy-dev

Sorry for the super late reply, but I am working on some major refactoring, and it's almost done. So good news guys, you can now choose to do whatever you'd like with the code blocks, even with react components. the code blocks in https://orga.js.org is highlighted via... well prismjs, but it's react-prism-renderer. Take a look at the code for the orgajs website. You'd have to use gatsby-plugin-orga though, which is the new webpack based plugin that support jsx in org-mode, mdx style, not the transformer (does not support jsx). I will release the new version soon.

Shiki looks interesting. 🤔

xiaoxinghu avatar Aug 27 '21 08:08 xiaoxinghu