Transforming the code

[arcanis]

I'm trying to have Shiki Twoslash support in my mdx files, but I'm not sure it's currently possible.

My idea was to parse the original file as an AST, extract the code fences, send them to JavaScript for processing, and return them back before serializing it into mdx. However, the API here seems to only expose the compile function, which does both parsing and transformation. Would it be reasonable to split them in two operations?

[wooorm]

Hey! Depends a lot on how you want to do this.

a) If the output is dynamic, you have a framework, and so you can use a component. That component can turn code into a Shiki Twoslash thing. If you use React, RSC helps, such as with https://github.com/code-hike/bright
b) If the output is static, you can use normal client-side JavaScript. Such as like this: https://github.com/wooorm/starry-night#example-using-starry-night-on-the-client.
c) There could be a plugin system: #8. That would likely not support JavaScript though.

I am personally not a big fan of using Shiki with ASTs/VDOMs, because it generates strings of HTML. Which need to be parsed again. That kinda defeats the purpose of how all of unified, and this, is built! The entire benefit is that we go AST -> AST -> AST, which is fast!
Something like starry-night helps with that.

Would it be reasonable to split them in two operations?

You can get an AST with markdown-rs. It’s used in this project