代码块与高亮
配置 extensionsOptions.codeBlockShiki,使用内置 Shiki 语言/主题或通过 CDN 加载扩展语法包。
代码块与高亮
SVeditor 使用 Shiki 渲染代码块,支持语言选择、主题切换、行号和可选自动换行。配置入口是 extensionsOptions.codeBlockShiki。
运行时策略:
- 常用语言和主题会内置在 SDK 中,不需要网络请求。
- 启用 CDN 时,其他语言和主题会从
languageBaseUrl/themeBaseUrl动态import().mjs模块。 - 设置
cdn: false时只使用内置集合,适合离线环境或严格 CSP。
在项目中接入
1. 使用默认 CDN(jsDelivr)
SVeditor.create({
el: "#editor",
extensionsOptions: {
codeBlockShiki: {
defaultTheme: "github-dark",
// cdn.enabled 默认为 true
},
},
});首次选用 Python、Rust 等非内置语言时,浏览器会请求类似路径:
https://cdn.jsdelivr.net/npm/@shikijs/langs@4.0.2/dist/python.mjs2. 自托管 Shiki 静态资源
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",
},
},
},官方 CDN 路径随 SDK 版本发布。将 languageBaseUrl 和 themeBaseUrl 指向与你锁定版本一致的 URL 即可。
3. 仅使用内置语言(无远程请求)
extensionsOptions: {
codeBlockShiki: {
cdn: false,
defaultTheme: "github-dark",
},
},下拉列表只会包含内置项。
内置语言与主题
内建语言与主题列表在 SDK 构建时确定。宿主可通过 extensionsOptions.codeBlockShiki.cdn 扩展远程加载。
内置语言(不走 CDN):
| id | 别名示例 |
|---|---|
javascript | js, mjs, cjs |
typescript | ts, mts, cts |
jsx | - |
tsx | - |
vue | - |
shellscript | bash, sh |
内置主题(不走 CDN):
github-light、github-dark、one-light、one-dark-pro、nord
验证 CDN 是否生效:选用 Python 或 Dracula 等扩展项,在 Network 中应看到对 *BaseUrl 的请求。
参数配置
interface CodeBlockShikiOptions {
defaultTheme?: string;
cdn?: false | CodeBlockShikiCdnOptions;
}常用 cdn 字段:
| 参数 | 说明 |
|---|---|
enabled | 默认 true;false 等同于仅内置 |
version | 未写 BaseUrl 时用于默认 jsDelivr 路径 |
languageBaseUrl | 请求 {base}/{id}.mjs |
themeBaseUrl | 主题模块路径前缀 |
languages / themes | 追加或覆盖下拉列表 |
allowUnlisted | 是否允许列表外但符合安全规则的 id |
loadLanguage / loadTheme | 自定义加载函数 |
工作原理
代码块需要高亮
|
|-- 语言/主题已在 highlighter 中 -> 直接渲染
|
|-- 属于内置集合 -> 从 SDK 包内加载
|
|-- CDN 开启且非内置 -> import(`${languageBaseUrl}/${id}.mjs`)
|
|-- 失败 -> 记录失败 URL,回退到文本 / 默认主题
Console 前缀:[SVeditor][CodeBlockShiki CDN]修改 languageBaseUrl 会改变 URL,通常可重新触发加载;开发时若状态异常可以硬刷新页面。
常见接入模式
与排版主题联动
extensionsOptions.theme.codeBlockShikiTheme 可以指定正文主题下的默认代码块主题,作者仍可在气泡菜单中单独切换代码块主题。
与自动保存
代码块是正文 JSON 的一部分,不需要单独保存接口;通过和正文相同的自动保存回调持久化即可。
CSP 限制
动态 import() 需要 CSP 允许对应静态域名。若无法放行,使用 cdn: false 并限制作者只使用内置语言。
注意事项
- 只有
shiki.bundle.ts中的 id 保证离线可用。 - 生产环境建议自托管 Shiki CDN,降低第三方 CDN 可用性风险。
- 稳定的
codeBlockShiki配置请放进useMemo;options引用变化时会重建编辑器。