Enforcing client side shiki syntax highlight

[pedraal]

I'm building a chat app (using LLMs API, how original is that 🙃) where some markdown content is streamed to the client. My implementation makes my Message component call the parseMarkdown whenever the content prop gets updated (every few ms depending on the response stream "speed"). By using the parseMarkdown helper as it is, it triggers calls the to /api/_mdc/highlight endpoint on each update which is not what I would want in a production environment.

By looking at the code, I found that if this API call catches an error it would set a mdc-shiki-highlighter item in the sessionStorage to switch to a client side shiki syntax highlighting. This is exactly what I would want to be my default behaviour. At the moment, I'm manually setting the sessionStorage item when my app mounts which actually seems to do the job.

Did I missed something in the configs that would make the module set this by default ? If not, I'd be happy to submit a PR to add this, I'm just wondering if it's something someone would like to see in this module.

PS: I'm a newbie to open source issue reporting / contributing, any guidance will be highly appreciated !

[antfu]

I think this is a valid concern, and I think it would be nice to have an option to toggle this behavior. We could provide a few different modes, like (auto, client-only, and server-only) - for those cases if a server-only is set, we could even avoid bundling Shiki to the client side at all (and vice-versa). WDYT @farnabaz?

[farnabaz]

Having different modes seems a good idea.
We might need to do a bit refactor in highlighting process to prevent hydration error in case of client-only.

@pedraal You did not miss anything, module does not have option to configure this behavior. Feel free to drop a PR.

[pedraal]

@farnabaz I'm really unfamiliar with nuxt modules development but I'll give it a try !

[pedraal]

@farnabaz I'm not able to run the playground, neither on my computer (MBA M1), neither in the codesandbox provided in the repo readme. Any guidance about this ?

[farnabaz]

@pedraal CodeSandbox has an issue (I just replaced it with working StackBlitz playground). But local develpment should be ok, what error did you get on local?