Code blocks & highlighting

SVeditor renders code blocks with Shiki, including language picker, theme switching, line numbers, and optional wrapping. Configure it through extensionsOptions.codeBlockShiki.

Runtime strategy:

1. Common languages and themes ship inside the SDK and need no network request.
2. With CDN enabled, additional languages and themes load via dynamic import() from languageBaseUrl / themeBaseUrl.
3. Set cdn: false to restrict the editor to bundled sets, which is useful offline or under strict CSP.

Integrate in your app

1. Default CDN (jsDelivr)

SVeditor.create({
  el: "#editor",
  extensionsOptions: {
    codeBlockShiki: {
      defaultTheme: "github-dark",
      // cdn.enabled defaults to true
    },
  },
});

The first use of Python, Rust, and other non-bundled languages triggers requests like:

https://cdn.jsdelivr.net/npm/@shikijs/langs@4.0.2/dist/python.mjs

2. Self-hosted Shiki assets

extensionsOptions: {
  codeBlockShiki: {
    defaultTheme: "github-dark",
    cdn: {
      languageBaseUrl:
        "https://static.editor.showverge.com/sdk/shiki-cdn/4.0.2/langs",
      themeBaseUrl:
        "https://static.editor.showverge.com/sdk/shiki-cdn/4.0.2/themes",
    },
  },
},

The official static host is uploaded from the SDK source repository during release. Consumer apps usually only need to point languageBaseUrl and themeBaseUrl at the published paths.

3. Bundled only (no remote requests)

extensionsOptions: {
  codeBlockShiki: {
    cdn: false,
    defaultTheme: "github-dark",
  },
},

Picker lists only bundled entries.

Bundled languages and themes

Built-in language and theme lists are fixed at SDK build time. Hosts can extend loading via extensionsOptions.codeBlockShiki.cdn.

Bundled languages (no CDN):

Bundled themes (no CDN):

github-light, github-dark, one-light, one-dark-pro, nord

To verify CDN: pick Python or Dracula and watch Network for your *BaseUrl.

Options

interface CodeBlockShikiOptions {
  defaultTheme?: string;
  cdn?: false | CodeBlockShikiCdnOptions;
}

Common cdn fields:

How it works

Block needs highlight
  |
  |-- Already loaded in highlighter -> render
  |
  |-- Bundled id -> load from SDK package
  |
  |-- CDN on and not bundled -> import(`${languageBaseUrl}/${id}.mjs`)
  |
  |-- Failure -> remember URL, fall back to text / default theme
        Console prefix: [SVeditor][CodeBlockShiki CDN]

Changing languageBaseUrl changes the URL and usually retries; hard-refresh if state looks stuck.

Common patterns

Typography theme

extensionsOptions.theme.codeBlockShikiTheme sets a default block theme; authors can still override per block in the bubble menu.

With auto-save

Code blocks live in document JSON and do not need a separate save API; persist them through the same auto-save callback as the rest of the document.

CSP

Dynamic import() requires allowing your static host. If that is not possible, use cdn: false and bundled languages only.

Notes

1. Only ids in shiki.bundle.ts are guaranteed offline.
2. Prefer self-hosted Shiki CDN in production over third-party availability risk.
3. Keep codeBlockShiki inside stable useMemo; remount the editor when options identity changes.

Next steps