[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

https://github.com/shikijs/shiki/issues/346#issuecomment-1229402139

[alamhubb]

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

[alamhubb]

https://github.com/shikijs/shiki/issues/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/')