[Shiki] no CDN provider found

[jiankafei]

code

import * as shiki from 'shiki';

const html = ref('');
shiki
  .getHighlighter({
    theme: props.theme,
  })
  .then((highlighter) => {
    html.value = highlighter.codeToHtml(props.content, props.lang);
  })
  .catch(console.warn);

result

[Shiki] no CDN provider found, use `setCDN()` to specify the CDN for loading the resources before calling `getHighlighter()`

[orta]

Can you say what you did about the error message?

[JounQin]

@orta Can we load all resources manually? I don't want to provide static resource path but bundled by vite/webpack.

[songhn233]

When using vite/webpack, there is a hint of no CDN provider found, but npm has already downloaded all themes and languages files, so setting CDN paths should only be an optional configuration?

[JounQin]

cc @octref

[octref]

Please provide a minimal, reproducible example. Link to a repo would be great.

[jiankafei]

@octref @orta https://codesandbox.io/s/beautiful-swirles-i6fr4

[octref]

@jiankafei Your example is showing this for error me: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 44 4f @+0

[Sparkenstein]

+1 for this, CDN feature should be optional in my opinion. especially for desktop apps created with electron, it's not feasible to connect CDN everytime.

for now using

setCDN("/node_modules/shiki/");

with vite worked for me, since vite serves the root directory. but this is temporary and will only work with vite-like bundlers AND in dev mode. in prod you will manually (somehow) have to copy shiki/dist to your dist.

[tkzt]

Agree with @Sparkenstein. For now, as is written in this file, we can load assets by setCDN('https://unpkg.com/shiki/') manually. But it's a little bit confusing, why not just consider node_modules/shiki as a default assets folder 👻(or maybe set a default CDN)

[alamhubb]

请提供一个最小的、可重现的例子。链接到回购会很棒。

https://stackblitz.com/edit/vitejs-vite-gqv1wz?file=package.json,src%2Fcomponents%2FHelloWorld.vue,index.html&terminal=dev

#346 (comment)

[alamhubb]

@jiankafei你的例子显示了这个错误我：WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 44 4f @+0

[alamhubb]

#246

[kingyue737]

If you are using vite, you can serve shiki assets with https://github.com/sapphi-red/vite-plugin-static-copy to make them both available in dev mode and production.

// vite.config.*
import { viteStaticCopy } from 'vite-plugin-static-copy'

export default {
  plugins: [
    viteStaticCopy({
      targets: [
        {
          src: 'node_modules/shiki',
          dest: '.'
        }
      ]
    })
  ]
}

Set CDN to the assets served by yourself before get the Highlighter:

setCDN('/shiki/')

[kossidts]

I am still having an issue with the following setup:

import * as shiki from "shiki";

shiki.setCDN("https://unpkg.com/shiki/");
const highlighter = await shiki.getHighlighter({ theme: "nord" }); // <-- This line is causing the error

const shikiOptions = { lang: "js" };

document.addEventListener("DOMContentLoaded", async event => {
    const $codeBlocks = document.querySelectorAll(".code");
    for (const $codeBlock of $codeBlocks) {
        const content = "console.log('shiki');"; // Test
        const renderedHtml = highlighter.codeToHtml(content, shikiOptions);
        $codeBlock.innerHTML = renderedHtml;
    }
})

The error:
Uncaught LinkError: WebAssembly.instantiate(): Import #4 module="env" function="setTempRet0" error: function import requires a callable

Has anyone got shiki running client-side?

[kingyue737]

@kossidts Comments in #382 give several workarounds

[kossidts]

Thank you @kingyue737 for the hint. It works by setting both setCDN and setWasm.
Just for anyone who wants to know:

import { getHighlighter, setCDN, setWasm } from "shiki";

document.addEventListener("DOMContentLoaded", async event => {
    // setWasm(new Response(await fetch("https://unpkg.com/shiki/dist/onig.wasm"))); // <- Didn't work although this is recommended per README
    const responseWasm = await fetch("https://unpkg.com/shiki/dist/onig.wasm");
    const wasmArrayBuffer = await responseWasm.arrayBuffer();
    setWasm(wasmArrayBuffer);
    setCDN("https://unpkg.com/shiki/");
    const highlighter = await getHighlighter({ theme: "nord", langs: ["js", "php", "python"] });
    
    // container.innerHTML = highlighter.codeToHtml(someCode, {lang: "js"})
})

[muenzpraeger]

FWIW, if you want to use the prebuild packages from unpkg or jsDelivr -> here's an example. No need to set CDN or WASM manually.

And thanks for the pointer with the new Response() - documentation is fixed here. My advice is to just pass in your example responseWasm - that's the response, so it'll get compiled while it's streamed.