[Help] Can't make it work in SvelteKit

[babakfp]

SvelteKit Docs

Error logs:

Source code:

[rmunn]

Running this under Svelte-Kit will probably involve calling setCDN() with an appropriate location (to load the WASM regex code Shiki uses) before calling getHighlighter, slightly complicated by the fact that you would want to call it only once.

My off-the-cuff recommendation, not yet tested, for using Shiki in Svelte-Kit would be to create a readable $highlighter store whose initializer calls setCDN(), then awaits the result of getHighlighter() and sets the store value once getHighlighter() returns. That way the $highlighter store will call setCDN() exactly once, when the browser first loads your Svelte code. After that, any subsequent use of the $highlighter store will just get the highlighter that's already been loaded. The only drawback is that the initial value of the store would be undefined so you'd need to check it for truthiness before using it, and display a simple <pre><code>code-to-render</code></pre> block if the highlighter is not yet available.

[babakfp]

Hi Thank you for your response.

I don't know how to do that😂😅. How do I need to call the setCDN()? Can you help me a little bit more, like can you write the whole code for me?😂

Thanks @rmunn

[CodeMyst]

You can also run shiki in svelte endpoints code since it's run on the server. https://kit.svelte.dev/docs#routing-endpoints

[babakfp]

I don't remember much but months ago I made this and it works: https://github.com/babakfp/svelte-shiki Don't close the issue. I'll check it later and I'll let you guys know...

[babakfp]

https://github.com/markedjs/marked/issues/2122