-
Notifications
You must be signed in to change notification settings - Fork 18
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Syntax highlighting via Shiki requires additional configuration #159
Comments
@antfu maybe you can provide some guidance since it's shiki-related? |
You don't need to enable Nitro's experimental WASM. MDC module should handle WASM configuration for you. Just remove the experimental option and try the preview. |
When I simply use the MDC module in a regular Nuxt project, I get a different error:
|
@farnabaz I've put together a small reproduction: https://github.com/adamdehaven/mdc-wasm-repro with simple instructions. Install deps, and then if you run However, if you run This matches what I see when I do an actual deploy to Cloudflare pages. |
I did manage to run and also deploy your reproduction is first attempt. https://a7626d8f.mdc-test-a.pages.dev/ Something might be happening in your machine that cause this behavior.
|
@farnabaz if you look at either of your deploy links above, notice the syntax highlighting is not working. The deploy itself works, but the Shiki syntax highlighting isn't functional. pnpm run dev (local)(notice the colors in the code block) Cloudflare Pages deploy(notice no syntax highlighting like on local) |
For reference, the end of this line is why I originally thought I needed to enable the Line 149 in 373d380
|
My bad, I thought it was raising error on deployment. |
@farnabaz so I saw the Shiki Nuxt blog post published today which indicates this should work out of the box with Cloudflare workers/Pages. What are we missing? 🤔 I dug in over the weekend but unfortunately didn't find anything that made this work |
@farnabaz I chatted with Sébastien on X and we determined a couple things:
It seems the issue could be related to operating within a monorepo? |
Ok I think I figured it out with help from @Atinux 🎉 but may need help figuring out the best place to supplement the documentation. Turns out it is undocumented (I believe) that you need to add Adding these two settings fixes syntax highlighting for the Cloudflare Pages deploy ✨ however, it breaks syntax highlighting for I think the easiest solution would be to only enable the experimental wasm for production, meaning your $production: {
nitro: {
// !Important: we only want to enable the wasm feature in production since it will break syntax highlighting when running the dev server
experimental: {
wasm: true,
},
},
},
vite: {
build: {
rollupOptions: {
external: [
'shiki/onig.wasm', // !Important: externalize the wasm import
],
},
},
}, Is adding the experimental wasm setting only for |
Here's a PR to supplement the documentation: #165 Ideally, I'd like to see if it's possible to leave the |
Should be fixed in #167 |
@farnabaz I'm working on implementing the
<MDCRenderer>
via our changes in #154 and am running into an issue whereby I cannot get wasm to work properly on Cloudflare Pages.Small reproduction repo: https://github.com/adamdehaven/mdc-wasm-repro
I enabled experimentalwasm
support in mynuxt.config.ts
nitro.experimental.wasm: true
(I think this is needed?) but then when usingwrangler
dev preview chokes.I think I need to somehow include the
shiki/onig.wasm
locally in my project based on the Shiki docs, but unsure how/where to do so.Would you be able to provide some guidance? The markdown itself renders; however, syntax highlighting obviously is not currently working for me.
The text was updated successfully, but these errors were encountered: