markstream-vue 0.0.4-beta.0 → 0.0.4-beta.2

package/README.md

@@ -104,6 +104,38 @@ enableMermaid()
 enableKatex()
 ```
 
+If you load KaTeX via CDN and want KaTeX rendering in a Web Worker (no bundler / optional peer not installed), inject a CDN-backed worker:
+
+```ts
+import { createKaTeXWorkerFromCDN, setKaTeXWorker } from 'markstream-vue'
+
+const { worker } = createKaTeXWorkerFromCDN({
+  mode: 'classic',
+  // UMD builds used by importScripts() inside the worker
+  katexUrl: 'https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/katex.min.js',
+  mhchemUrl: 'https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/contrib/mhchem.min.js',
+})
+
+if (worker)
+  setKaTeXWorker(worker)
+```
+
+If you load Mermaid via CDN and want off-main-thread parsing (used by progressive Mermaid rendering), inject a Mermaid parser worker:
+
+```ts
+import { createMermaidWorkerFromCDN, setMermaidWorker } from 'markstream-vue'
+
+const { worker } = createMermaidWorkerFromCDN({
+  // Mermaid CDN builds are commonly ESM; module worker is recommended.
+  mode: 'module',
+  workerOptions: { type: 'module' },
+  mermaidUrl: 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs',
+})
+
+if (worker)
+  setMermaidWorker(worker)
+```
+
 ### Nuxt quick drop-in
 
 ```ts
@@ -274,7 +306,8 @@ Parse hooks example (match server + client):
 
 ## ❓ FAQ (quick answers)
 
-- Mermaid/KaTeX not rendering? Install the peer (`mermaid` / `katex`) and pass `:enable-mermaid="true"` / `:enable-katex="true"` or call the loader setters.
+- Mermaid/KaTeX not rendering? Install the peer (`mermaid` / `katex`) and pass `:enable-mermaid="true"` / `:enable-katex="true"` or call the loader setters. If you load them via CDN script tags, the library will also pick up `window.mermaid` / `window.katex`.
+- CDN + KaTeX worker: if you don't bundle `katex` but still want off-main-thread rendering, create and inject a worker that loads KaTeX via CDN (UMD) using `createKaTeXWorkerFromCDN()` + `setKaTeXWorker()`.
 - Bundle size: peers are optional and not bundled; import only `markstream-vue/index.css` once. Use Shiki (`MarkdownCodeBlockNode`) when Monaco is too heavy.
 - Custom UI: register components via `setCustomComponents` (global) or `custom-components` prop, then emit markers/placeholders in Markdown and map them to Vue components.
 

package/README.zh-CN.md

@@ -103,6 +103,38 @@ enableMermaid()
 enableKatex()
 ```
 
+如果你是用 CDN 引入 KaTeX，并且希望公式在 Web Worker 中渲染（不打包 / 不安装可选 peer），可以注入一个“CDN 加载 KaTeX”的 worker：
+
+```ts
+import { createKaTeXWorkerFromCDN, setKaTeXWorker } from 'markstream-vue'
+
+const { worker } = createKaTeXWorkerFromCDN({
+  mode: 'classic',
+  // worker 内通过 importScripts() 加载的 UMD 构建
+  katexUrl: 'https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/katex.min.js',
+  mhchemUrl: 'https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/contrib/mhchem.min.js',
+})
+
+if (worker)
+  setKaTeXWorker(worker)
+```
+
+如果你是用 CDN 引入 Mermaid，并且希望 Mermaid 的解析在 worker 中进行（用于渐进式 Mermaid 渲染的后台解析），可以注入 Mermaid parser worker：
+
+```ts
+import { createMermaidWorkerFromCDN, setMermaidWorker } from 'markstream-vue'
+
+const { worker } = createMermaidWorkerFromCDN({
+  // Mermaid CDN 构建通常是 ESM，推荐 module worker。
+  mode: 'module',
+  workerOptions: { type: 'module' },
+  mermaidUrl: 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs',
+})
+
+if (worker)
+  setMermaidWorker(worker)
+```
+
 ### Nuxt 快速接入
 
 ```ts
@@ -273,7 +305,8 @@ setCustomComponents({
 
 ## ❓ 快问快答
 
-- Mermaid / KaTeX 不显示？安装对应 peer（`mermaid` / `katex`），并传入 `:enable-mermaid="true"` / `:enable-katex="true"` 或调用 loader 设置函数。
+- Mermaid / KaTeX 不显示？安装对应 peer（`mermaid` / `katex`），并传入 `:enable-mermaid="true"` / `:enable-katex="true"` 或调用 loader 设置函数。如果你是用 CDN `<script>` 引入，库也会自动读取 `window.mermaid` / `window.katex`。
+- CDN + KaTeX worker：如果你不打包 `katex` 但仍希望公式在 worker 中渲染（不占主线程），可以用 `createKaTeXWorkerFromCDN()` 创建一个“CDN 加载 KaTeX”的 worker，然后通过 `setKaTeXWorker()` 注入。
 - 体积问题：可选 peer 不会被打包，CSS 只需导入一次；对代码块可用 Shiki（`MarkdownCodeBlockNode`）替代 Monaco 以减轻体积。
 - 自定义 UI：通过 `setCustomComponents`（全局）或 `custom-components` prop 注册组件，在 Markdown 中放置占位标记并映射到 Vue 组件。