markstream-vue 1.1.2-beta.3 → 2.0.0-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +33 -13
- package/README.zh-CN.md +31 -18
- package/dist/CodeBlockNode.js +1 -1
- package/dist/Tooltip.js +1 -1
- package/dist/exports.js +1 -1
- package/dist/index.css +1 -1
- package/dist/index.d.ts +72 -160
- package/dist/index.js +1 -1
- package/dist/index.px.css +1 -1
- package/dist/index.tailwind.css +1 -1
- package/dist/index10.js +1 -1
- package/dist/index2.js +1 -1
- package/dist/index5.js +1 -1
- package/dist/index6.js +1 -1
- package/dist/index7.js +1 -1
- package/dist/index8.js +1 -1
- package/dist/index9.js +1 -1
- package/dist/streamDiffs.js +1 -0
- package/dist/tailwind.js +0 -0
- package/dist/utils/index.d.ts +2 -139
- package/dist/utils/index.js +1 -1
- package/package.json +35 -27
- package/dist/index11.js +0 -1
- package/dist/monaco.js +0 -1
package/README.md
CHANGED
|
@@ -32,8 +32,19 @@ Other packages:
|
|
|
32
32
|
|
|
33
33
|
## Install markstream-vue
|
|
34
34
|
|
|
35
|
+
The stable line remains 1.x. The coordinated 2.0 beta will use `next`; first verify
|
|
36
|
+
that `npm view markstream-vue@next version` reports `2.0.0-beta.1`, then follow
|
|
37
|
+
the [1.x to 2.0 migration guide](https://markstream.simonhe.me/guide/migration-2-0):
|
|
38
|
+
|
|
35
39
|
```bash
|
|
36
|
-
pnpm add markstream-vue
|
|
40
|
+
pnpm add markstream-vue@next stream-diffs
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
During the beta, the untagged package remains on 1.x. Use `@1` when you want to
|
|
44
|
+
pin the maintained 1.x line across the stable 2.0 cutover:
|
|
45
|
+
|
|
46
|
+
```bash
|
|
47
|
+
pnpm add markstream-vue@1
|
|
37
48
|
```
|
|
38
49
|
|
|
39
50
|
```vue
|
|
@@ -88,7 +99,9 @@ Start with the [framework overview](https://markstream.simonhe.me/frameworks) if
|
|
|
88
99
|
|
|
89
100
|
## Stability
|
|
90
101
|
|
|
91
|
-
`markstream-vue` has a stable 1.x API contract. The
|
|
102
|
+
`markstream-vue` has a stable 1.x API contract. The breaking 2.0 line will be released through the npm `next` tag for validation before it can replace `latest`. It removes the Monaco and `stream-markdown` code-block runtimes and uses `stream-diffs` as the only enhanced code-block surface. See [Migrating from 1.x to 2.0](https://markstream.simonhe.me/guide/migration-2-0) before upgrading.
|
|
103
|
+
|
|
104
|
+
The stable surface includes `MarkdownRender`, streaming content rendering, pre-parsed node rendering, the safe HTML policy, optional Mermaid / KaTeX / D2 / Infographic integrations, enhanced code blocks, virtual-scroll coordination, CSS exports, worker client subpaths, and SSR imports for Vite / Nuxt / VitePress.
|
|
92
105
|
|
|
93
106
|
Cross-framework renderers (`markstream-react`, `markstream-octane`, `markstream-svelte`, `markstream-angular`, `markstream-vue2`) are available and actively developed. Check each package page for API maturity, framework support, and known limitations.
|
|
94
107
|
|
|
@@ -126,7 +139,7 @@ For the full release contract and Go / No-Go checklist, see [1.0 Release Readine
|
|
|
126
139
|
|
|
127
140
|
- Purpose-built for **streaming Markdown** (AI/chat/SSE), designed to minimize flicker and keep memory predictable.
|
|
128
141
|
- **Two render modes**: virtual window for long docs, incremental batching for “typing” effects.
|
|
129
|
-
- **Progressive diagrams** (Mermaid) and **streaming code blocks** (
|
|
142
|
+
- **Progressive diagrams** (Mermaid) and **streaming code blocks** (stream-diffs) that keep up with diffs.
|
|
130
143
|
- Works with **raw Markdown strings or pre-parsed nodes**, with custom framework components in Vue, React, Octane, Svelte, and Angular.
|
|
131
144
|
- TypeScript-first, ship-ready defaults — import CSS and render.
|
|
132
145
|
|
|
@@ -178,6 +191,7 @@ npx skills add Simon-He95/markstream-vue
|
|
|
178
191
|
Recommended usage:
|
|
179
192
|
|
|
180
193
|
- `npx skills add Simon-He95/markstream-vue` is the primary path for Codex-compatible skill discovery because it reads `.agents/skills` directly from the GitHub repository
|
|
194
|
+
- use the bundled `markstream-migration` skill when upgrading an existing Markstream 1.x application to 2.0
|
|
181
195
|
- `markstream-vue@1.0` no longer exposes the `markstream-vue` CLI or any CLI `bin`; repository scripts such as `pnpm skills:list` and `pnpm prompts:list` are contributor-only helpers for cloned checkouts
|
|
182
196
|
- prompts remain in the repository under `prompts/` for direct copying or future separate-package work
|
|
183
197
|
|
|
@@ -321,7 +335,7 @@ createApp({
|
|
|
321
335
|
}).mount('#app')
|
|
322
336
|
```
|
|
323
337
|
|
|
324
|
-
Import `markstream-vue/index.css` after your reset (e.g., use `@import 'markstream-vue/index.css' layer(components);` for Tailwind) so renderer styles win over utility classes. Install optional peers such as `stream-diffs`, `
|
|
338
|
+
Import `markstream-vue/index.css` after your reset (e.g., use `@import 'markstream-vue/index.css' layer(components);` for Tailwind) so renderer styles win over utility classes. Install optional peers such as `stream-diffs`, `mermaid`, and `katex` only when you need enhanced code blocks and diffs, diagrams, or math.
|
|
325
339
|
For untrusted user-generated content, prefer `htmlPolicy="escape"` so raw HTML is rendered as text.
|
|
326
340
|
If your app intentionally scales root font size on mobile, use `markstream-vue/index.px.css` to avoid `rem`-based global scaling side effects.
|
|
327
341
|
|
|
@@ -346,10 +360,12 @@ Choose the renderer mode by surface:
|
|
|
346
360
|
```
|
|
347
361
|
|
|
348
362
|
Use `mode="minimal"` when you want the same lightweight defaults as `chat`, but prefer a neutral mode name for non-chat surfaces. Avoid combining high-frequency `smooth-streaming` with `fade`; it can turn a steady stream into repeated opacity restarts.
|
|
349
|
-
For the same chat message, do not switch from `mode="chat"` to `mode="docs"` only because `final` changed. Keep the mode stable and switch pacing/animation props (`smooth-streaming`, `typewriter`, `fade`) instead; `docs` changes the
|
|
350
|
-
For
|
|
363
|
+
For the same chat message, do not switch from `mode="chat"` to `mode="docs"` only because `final` changed. Keep the mode stable and switch pacing/animation props (`smooth-streaming`, `typewriter`, `fade`) instead; `docs` changes the layout strategy.
|
|
364
|
+
For surfaces that do not need enhanced code blocks, set `:render-code-blocks-as-pre="true"`. If you want the rich `CodeBlockNode` UI and File/Diff rendering, install `stream-diffs`; otherwise the renderer intentionally falls back to `<pre>` rendering. To own ordinary fenced-code rendering, register a scoped `code_block` with `setCustomComponents`.
|
|
351
365
|
`stream-diffs` is a framework-agnostic DOM runtime. `CodeBlockNode` owns the Vue-side decision of when to replace the streaming `<pre>` with its finalized File or FileDiff surface.
|
|
352
366
|
|
|
367
|
+
Use the top-level `code-block-options` prop to configure the built-in surface; direct `CodeBlockNode` usage accepts the same `codeBlockOptions` object. `CodeBlockOptions` is shared across all six framework adapters. It covers host-managed typography/layout (`fontSize`, `lineHeight`, `fontFamily`, numeric-pixel `maxHeight`, numeric-pixel symmetric `padding`, `tabSize`) plus supported File/FileDiff, interaction, annotation, and callback fields. Theme, code/language, stream state, header, mounting, reveal, and disposal remain host-owned.
|
|
368
|
+
|
|
353
369
|
Renderer CSS is scoped under an internal `.markstream-vue` container to minimize global style conflicts. If you render exported node components outside of `MarkdownRender`, wrap them in an element with class `markstream-vue`.
|
|
354
370
|
|
|
355
371
|
For dark theme variables, either add a `.dark` class on an ancestor, or pass `:is-dark="true"` to `MarkdownRender` to scope dark mode to the renderer.
|
|
@@ -364,6 +380,8 @@ Prefer the unified code-block `theme` prop for new integrations. When you render
|
|
|
364
380
|
/>
|
|
365
381
|
```
|
|
366
382
|
|
|
383
|
+
Theme values are registered names: direct `CodeBlockNode.theme` accepts a fixed string or `{ dark, light }`, and `themes` is the `[dark, light]` pair to load. A former Monaco JSON theme object is not renamed directly; call `registerCustomTheme` from `stream-diffs/pierre`, then pass the registered name.
|
|
384
|
+
|
|
367
385
|
`code-block-props` forwards user-facing code block props only. Structural renderer keys such as `node`, `key`, `ref`, `ctx`, `renderNode`, `indexKey`, `__proto__`, `prototype`, and `constructor` are ignored.
|
|
368
386
|
|
|
369
387
|
Language icons use the built-in `material` theme by default. For new integrations, inspect or switch icon themes with the exported helpers before `app.mount()`. The legacy `app.use(VueRendererMarkdown, { iconTheme })` option still works in 1.x, but prefer helpers because icon configuration is process-global state.
|
|
@@ -616,7 +634,7 @@ If markstream-vue helps your work, you can support ongoing maintenance with one
|
|
|
616
634
|
|
|
617
635
|
- AI/chat UIs with long-form answers and Markdown tokens arriving over SSE/websocket.
|
|
618
636
|
- Docs, changelogs, and knowledge bases that need instant load but stay responsive as they grow.
|
|
619
|
-
- Streaming diffs and code review panes that benefit from
|
|
637
|
+
- Streaming diffs and code review panes that benefit from stream-diffs diff rendering.
|
|
620
638
|
- Diagram-heavy content that should render progressively (Mermaid) without blocking.
|
|
621
639
|
- Embedding Vue components in Markdown-driven surfaces (callouts, widgets, CTA buttons).
|
|
622
640
|
|
|
@@ -624,7 +642,7 @@ If markstream-vue helps your work, you can support ongoing maintenance with one
|
|
|
624
642
|
|
|
625
643
|
- 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`.
|
|
626
644
|
- 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()`.
|
|
627
|
-
- Bundle size: peers are optional and not bundled; import only `markstream-vue/index.css` once;
|
|
645
|
+
- Bundle size: peers are optional and not bundled; import only `markstream-vue/index.css` once; enhanced code blocks load the `stream-diffs` runtime on demand only when it is installed. Infrequent language icons are split into an async chunk and load on demand; call `preloadExtendedLanguageIcons()` during app idle if you want to avoid first-hit icon fallback.
|
|
628
646
|
- Custom UI: register components via `setCustomComponents` (global or scoped), then emit markers/placeholders in Markdown and map them to Vue components.
|
|
629
647
|
|
|
630
648
|
## 🆚 Why markstream-vue over a typical Markdown renderer?
|
|
@@ -632,7 +650,7 @@ If markstream-vue helps your work, you can support ongoing maintenance with one
|
|
|
632
650
|
| Needs | Typical Markdown preview | markstream-vue |
|
|
633
651
|
| --- | --- | --- |
|
|
634
652
|
| Streaming input | Re-renders whole tree, flashes | Incremental batches with virtual windowing |
|
|
635
|
-
| Large code blocks | Slow re-highlight | `stream-diffs` File/Diff surface
|
|
653
|
+
| Large code blocks | Slow re-highlight | `stream-diffs` File/Diff surface |
|
|
636
654
|
| Diagrams | Blocks while parsing | Progressive Mermaid with graceful fallback |
|
|
637
655
|
| Custom UI | Limited slots | Inline Vue components & typed nodes |
|
|
638
656
|
| Long docs | Memory spikes | Configurable live-node cap for steady usage |
|
|
@@ -640,7 +658,7 @@ If markstream-vue helps your work, you can support ongoing maintenance with one
|
|
|
640
658
|
## 🗺️ Roadmap (snapshot)
|
|
641
659
|
|
|
642
660
|
- More “instant start” templates (Vite + Nuxt + Tailwind) and updated StackBlitz.
|
|
643
|
-
- Additional codeblock presets (diff-friendly
|
|
661
|
+
- Additional codeblock presets (stream-diffs diff-friendly themes).
|
|
644
662
|
- Cookbook docs for AI/chat patterns (SSE/WebSocket, retry/resume, markdown mid-states).
|
|
645
663
|
- More showcase examples for embedding Vue components inside Markdown surfaces.
|
|
646
664
|
|
|
@@ -648,6 +666,10 @@ If markstream-vue helps your work, you can support ongoing maintenance with one
|
|
|
648
666
|
|
|
649
667
|
- Latest: [Releases](https://github.com/Simon-He95/markstream-vue/releases) — see highlights and upgrade notes.
|
|
650
668
|
- Full history: [CHANGELOG.md](./CHANGELOG.md)
|
|
669
|
+
- 2.0 beta candidate:
|
|
670
|
+
- After `npm view markstream-vue@next version` reports `2.0.0-beta.1`, install `markstream-vue@next` with `stream-diffs`; stable 1.x remains available through `@1`.
|
|
671
|
+
- Monaco and `stream-markdown` runtimes and Monaco-named APIs are removed; supported code-block options move to `codeBlockOptions`.
|
|
672
|
+
- Read [Migrating from 1.x to 2.0](https://markstream.simonhe.me/guide/migration-2-0) before upgrading.
|
|
651
673
|
- 1.0 launch notes:
|
|
652
674
|
- Stable Vue 3 renderer API, SSR imports, CSS exports, Tailwind export, worker client exports, and safe HTML defaults.
|
|
653
675
|
- `markstream-vue@1.0.0`, `markstream-core@1.0.0`, and `stream-markdown-parser@1.0.0` ship together.
|
|
@@ -681,7 +703,7 @@ Watch on Bilibili: [Open in Bilibili](https://www.bilibili.com/video/BV17Z4qzpE9
|
|
|
681
703
|
- 🔄 Real-time updates: supports incremental content without breaking formatting
|
|
682
704
|
- 📦 TypeScript-first: complete type definitions and IntelliSense
|
|
683
705
|
- 🔌 Package defaults: works out of the box in the supported framework entry points
|
|
684
|
-
- 🎨
|
|
706
|
+
- 🎨 Enhanced code block rendering: `stream-diffs` File/Diff surface (`CodeBlockNode`) or plain `<pre>` fallback without the peer
|
|
685
707
|
- 🧰 Parser toolkit: [`stream-markdown-parser`](./packages/markdown-parser) now documents how to reuse the parser in workers/SSE streams and feed `<MarkdownRender :nodes>` directly, plus APIs for registering global plugins and custom math helpers.
|
|
686
708
|
|
|
687
709
|
## 🙌 Contributing & community
|
|
@@ -728,10 +750,8 @@ Thanks to all the people who have contributed to this project!
|
|
|
728
750
|
|
|
729
751
|
This project uses and benefits from:
|
|
730
752
|
- [stream-diffs](https://github.com/Simon-He95/stream-diffs)
|
|
731
|
-
- [stream-markdown](https://github.com/Simon-He95/stream-markdown)
|
|
732
753
|
- [mermaid](https://mermaid-js.github.io/mermaid)
|
|
733
754
|
- [katex](https://katex.org/)
|
|
734
|
-
- [shiki](https://github.com/shikijs/shiki)
|
|
735
755
|
- [markdown-it-ts](https://github.com/Simon-He95/markdown-it-ts)
|
|
736
756
|
|
|
737
757
|
Thanks to the authors and contributors of these projects!
|
package/README.zh-CN.md
CHANGED
|
@@ -60,7 +60,9 @@ Vue 包:
|
|
|
60
60
|
|
|
61
61
|
## 稳定性
|
|
62
62
|
|
|
63
|
-
`markstream-vue`
|
|
63
|
+
`markstream-vue` 继续维护稳定的 1.x API 契约。破坏性的 2.0 版本线先通过 npm `next` 标签进行验证,不会在 beta 阶段替换 `latest`。2.0 移除 Monaco 和 `stream-markdown` 代码块 runtime,并将 `stream-diffs` 作为唯一的增强代码块表面。升级前请阅读 [从 1.x 迁移到 2.0](https://markstream.simonhe.me/zh/guide/migration-2-0)。
|
|
64
|
+
|
|
65
|
+
稳定面包括:`MarkdownRender`、流式内容渲染、预解析节点渲染、安全 HTML 策略、可选 Mermaid / KaTeX / D2 / Infographic 集成、增强代码块、虚拟滚动协调、CSS 导出、worker client 子路径以及 Vite / Nuxt / VitePress 的 SSR 导入。
|
|
64
66
|
|
|
65
67
|
跨框架渲染器(`markstream-react`、`markstream-octane`、`markstream-svelte`、`markstream-angular`、`markstream-vue2`)已可用并积极开发中。请查看各包文档了解 API 成熟度、框架支持和已知限制。
|
|
66
68
|
|
|
@@ -94,7 +96,7 @@ Vue 包:
|
|
|
94
96
|
|
|
95
97
|
- 为 **流式 Markdown**(AI/聊天/SSE)打造,目标是减少闪烁并保持内存可预期。
|
|
96
98
|
- **双渲染模式**:长文档虚拟化窗口,或“打字机”式增量批次。
|
|
97
|
-
- **渐进式图表**(Mermaid)与 **流式代码块**(
|
|
99
|
+
- **渐进式图表**(Mermaid)与 **流式代码块**(stream-diffs),跟上 diff/增量输出。
|
|
98
100
|
- 同时支持 **Markdown 字符串或预解析节点**,可在 Vue、React、Octane、Svelte 和 Angular 中嵌入 **自定义框架组件**。
|
|
99
101
|
- TypeScript 优先,开箱默认即可上线(导入 CSS 即用)。
|
|
100
102
|
|
|
@@ -146,6 +148,7 @@ npx skills add Simon-He95/markstream-vue
|
|
|
146
148
|
推荐这样理解:
|
|
147
149
|
|
|
148
150
|
- `npx skills add Simon-He95/markstream-vue` 是最推荐的安装方式,因为它会直接读取 GitHub 仓库里的 `.agents/skills`
|
|
151
|
+
- 升级现有 Markstream 1.x 应用到 2.0 时,使用内置的 `markstream-migration` skill
|
|
149
152
|
- `markstream-vue@1.0` 不发布 CLI `bin`;`pnpm skills:list`、`pnpm prompts:list` 这类脚本只面向克隆仓库后的维护者
|
|
150
153
|
- prompts 继续保留在仓库的 `prompts/` 目录下,供直接复制或后续拆成独立包
|
|
151
154
|
|
|
@@ -182,8 +185,16 @@ npx skills add git@github.com:Simon-He95/markstream-vue.git
|
|
|
182
185
|
|
|
183
186
|
### Vue / Nuxt
|
|
184
187
|
|
|
188
|
+
协调发布的 2.0 beta 将使用 `next`。请先确认 `npm view markstream-vue@next version` 返回 `2.0.0-beta.1`,再执行:
|
|
189
|
+
|
|
185
190
|
```bash
|
|
186
|
-
pnpm add markstream-vue
|
|
191
|
+
pnpm add markstream-vue@next stream-diffs
|
|
192
|
+
```
|
|
193
|
+
|
|
194
|
+
从 1.x 升级前请阅读 [2.0 迁移指南](https://markstream.simonhe.me/zh/guide/migration-2-0)。beta 阶段无 tag 安装仍然保持在 1.x;如需在 2.0 stable 切换后仍锁定维护中的 1.x,请显式使用 `markstream-vue@1`。
|
|
195
|
+
|
|
196
|
+
```bash
|
|
197
|
+
pnpm add markstream-vue@1
|
|
187
198
|
```
|
|
188
199
|
|
|
189
200
|
```vue
|
|
@@ -297,7 +308,7 @@ createApp({
|
|
|
297
308
|
}).mount('#app')
|
|
298
309
|
```
|
|
299
310
|
|
|
300
|
-
确保在 CSS reset(如 `@tailwind base` 或 `@unocss/reset`)之后导入 `markstream-vue/index.css`,推荐使用 `@import 'markstream-vue/index.css' layer(components);` 以避免 Tailwind/UnoCSS 覆盖组件样式。根据需求再按需安装可选 peer 依赖:`stream-diffs`(增强代码块与 diff)、`
|
|
311
|
+
确保在 CSS reset(如 `@tailwind base` 或 `@unocss/reset`)之后导入 `markstream-vue/index.css`,推荐使用 `@import 'markstream-vue/index.css' layer(components);` 以避免 Tailwind/UnoCSS 覆盖组件样式。根据需求再按需安装可选 peer 依赖:`stream-diffs`(增强代码块与 diff)、`mermaid`(Mermaid 图表)、`katex`(数学公式)。
|
|
301
312
|
如果你的移动端会主动调大根字号(`html`/`body`),建议改用 `markstream-vue/index.px.css`,避免 `rem` 跟随根字号导致整体放大。
|
|
302
313
|
|
|
303
314
|
按使用场景选择渲染模式:
|
|
@@ -321,10 +332,12 @@ createApp({
|
|
|
321
332
|
```
|
|
322
333
|
|
|
323
334
|
当你想要和 `chat` 相同的轻量默认值,但当前页面不是聊天语义时,可以使用 `mode="minimal"`。避免把高频 `smooth-streaming` 和 `fade` 同时开启,否则稳定的流式输出可能变成反复重启的透明度动画。
|
|
324
|
-
同一条聊天消息不要仅因为 `final` 变为 `true` 就从 `mode="chat"` 切到 `mode="docs"`。保持 mode 稳定,只切换 `smooth-streaming`、`typewriter`、`fade` 等节奏/动画 props;`docs`
|
|
325
|
-
|
|
335
|
+
同一条聊天消息不要仅因为 `final` 变为 `true` 就从 `mode="chat"` 切到 `mode="docs"`。保持 mode 稳定,只切换 `smooth-streaming`、`typewriter`、`fade` 等节奏/动画 props;`docs` 会改变布局策略。
|
|
336
|
+
如果某个渲染面不需要增强代码块,建议设置 `:render-code-blocks-as-pre="true"`;如果需要富 `CodeBlockNode` UI 与 File/Diff 渲染,请安装 `stream-diffs`,否则渲染器会按设计降级为 `<pre>` 渲染。如果应用要完全接管普通 fenced code,用 `setCustomComponents` 注册带作用域的 `code_block`。
|
|
326
337
|
`stream-diffs` 是与框架无关的 DOM runtime;由 `CodeBlockNode` 决定何时把流式 `<pre>` 切换为最终的 File 或 FileDiff surface。
|
|
327
338
|
|
|
339
|
+
使用顶层 `code-block-options` 配置内置 surface;直接使用 `CodeBlockNode` 时接收同一个 `codeBlockOptions` object。六个框架 adapter 共享 `CodeBlockOptions`。它包含宿主管理的排版/布局字段(`fontSize`、`lineHeight`、`fontFamily`、number 类型且单位为 px 的 `maxHeight`、number 类型且单位为 px 的上下对称 `padding`、`tabSize`),以及受支持的 File/FileDiff、交互、annotation 与 callback 字段。主题、code/language、流式状态、header、挂载、显示与释放仍由宿主管理。
|
|
340
|
+
|
|
328
341
|
渲染器的 CSS 会作用于内部 `.markstream-vue` 容器下,以尽量降低对全局的影响;如果你脱离 `MarkdownRender` 单独使用导出的节点组件,请在外层包一层带 `markstream-vue` 类名的容器。
|
|
329
342
|
|
|
330
343
|
暗色变量可以通过给祖先节点加 `.dark`,或直接给 `MarkdownRender` 传入 `:is-dark="true"`(仅对渲染器生效)。
|
|
@@ -339,6 +352,8 @@ createApp({
|
|
|
339
352
|
/>
|
|
340
353
|
```
|
|
341
354
|
|
|
355
|
+
主题值使用已注册名称:直接 `CodeBlockNode.theme` 接收固定 string 或 `{ dark, light }`,`themes` 是要加载的 `[dark, light]` 对。旧 Monaco JSON theme object 不会直接改名;先调用 `stream-diffs/pierre` 的 `registerCustomTheme`,再传入注册名称。
|
|
356
|
+
|
|
342
357
|
`code-block-props` 只会透传面向用户的代码块 props;`node`、`key`、`ref`、`ctx`、`renderNode`、`indexKey`、`__proto__`、`prototype`、`constructor` 等渲染器结构字段会被忽略。
|
|
343
358
|
|
|
344
359
|
语言图标默认使用内置的 `material` theme。新接入建议在 `app.mount()` 之前通过导出的 helper 查看或切换 icon theme。旧的 `app.use(VueRendererMarkdown, { iconTheme })` 选项在 1.x 仍可用,但它会修改进程级全局状态,因此优先使用 helper。
|
|
@@ -577,7 +592,7 @@ setCustomComponents('docs', {
|
|
|
577
592
|
|
|
578
593
|
- AI / 聊天界面:Markdown token 通过 SSE/WebSocket 持续抵达,要求无闪烁与稳定内存。
|
|
579
594
|
- 文档、变更日志、知识库:需要即时加载,同时保持长内容滚动的流畅性。
|
|
580
|
-
- 流式 diff /
|
|
595
|
+
- 流式 diff / 代码审查:`stream-diffs` 增量更新让大代码块也能跟上变更。
|
|
581
596
|
- 图表与示意:Mermaid 渐进式渲染,避免阻塞主渲染。
|
|
582
597
|
- Markdown 驱动的界面中嵌入 Vue 组件(callout、交互式挂件、CTA 等)。
|
|
583
598
|
|
|
@@ -585,7 +600,7 @@ setCustomComponents('docs', {
|
|
|
585
600
|
|
|
586
601
|
- Mermaid / KaTeX 不显示?安装对应 peer(`mermaid` / `katex`),并传入 `:enable-mermaid="true"` / `:enable-katex="true"` 或调用 loader 设置函数。如果你是用 CDN `<script>` 引入,库也会自动读取 `window.mermaid` / `window.katex`。
|
|
587
602
|
- CDN + KaTeX worker:如果你不打包 `katex` 但仍希望公式在 worker 中渲染(不占主线程),可以用 `createKaTeXWorkerFromCDN()` 创建一个“CDN 加载 KaTeX”的 worker,然后通过 `setKaTeXWorker()` 注入。
|
|
588
|
-
- 体积问题:可选 peer 不会被打包,CSS
|
|
603
|
+
- 体积问题:可选 peer 不会被打包,CSS 只需导入一次;增强代码块仅在安装了 `stream-diffs` 时按需加载其运行时。低频语言图标已拆分为异步 chunk 并按需加载;如果希望避免首次命中图标回退,可在空闲时调用 `preloadExtendedLanguageIcons()` 预热。
|
|
589
604
|
- 自定义 UI:通过 `setCustomComponents`(全局或作用域)注册组件,在 Markdown 中放置占位标记并映射到 Vue 组件。
|
|
590
605
|
|
|
591
606
|
## 🆚 为什么选择 markstream-vue,而不是普通 Markdown 渲染器?
|
|
@@ -593,7 +608,7 @@ setCustomComponents('docs', {
|
|
|
593
608
|
| 需求 | 普通 Markdown 预览 | markstream-vue |
|
|
594
609
|
| --- | --- | --- |
|
|
595
610
|
| 流式输入 | 全量重渲染、易闪烁 | 虚拟窗口 + 增量批次 |
|
|
596
|
-
| 大代码块 | 重新高亮速度慢 |
|
|
611
|
+
| 大代码块 | 重新高亮速度慢 | `stream-diffs` File/Diff 界面 |
|
|
597
612
|
| 图表 | 解析/渲染阻塞 | Mermaid 渐进式渲染与回退 |
|
|
598
613
|
| 自定义 UI | 插槽有限 | Markdown 内嵌 Vue 组件与类型化节点 |
|
|
599
614
|
| 长文档 | 内存峰值高 | 可配置 live-node 上限,滚动稳定 |
|
|
@@ -601,7 +616,7 @@ setCustomComponents('docs', {
|
|
|
601
616
|
## 🗺️ Roadmap(快照)
|
|
602
617
|
|
|
603
618
|
- 更多「即开即用」模板(Vite / Nuxt / Tailwind)与 StackBlitz 更新。
|
|
604
|
-
-
|
|
619
|
+
- 代码块预设扩展(stream-diffs 的 diff 友好主题)。
|
|
605
620
|
- AI / 聊天场景的 Cookbook(SSE/WebSocket、重试与续传、Markdown 中间态处理)。
|
|
606
621
|
- 展示更多在 Markdown 中嵌入 Vue 组件的示例与实践。
|
|
607
622
|
|
|
@@ -609,10 +624,10 @@ setCustomComponents('docs', {
|
|
|
609
624
|
|
|
610
625
|
- 最新版本与升级提示:[Releases](https://github.com/Simon-He95/markstream-vue/releases)
|
|
611
626
|
- 完整历史:[CHANGELOG.md](./CHANGELOG.md)
|
|
612
|
-
-
|
|
613
|
-
-
|
|
614
|
-
- Monaco
|
|
615
|
-
-
|
|
627
|
+
- 2.0 beta 候选版:
|
|
628
|
+
- `npm view markstream-vue@next version` 返回 `2.0.0-beta.1` 后,通过 `markstream-vue@next` 安装;稳定 1.x 继续通过 `@1` 获取。
|
|
629
|
+
- Monaco、`stream-markdown` runtime 与 Monaco 命名 API 已移除;受支持的代码块配置迁移到 `codeBlockOptions`。
|
|
630
|
+
- 升级前阅读 [从 1.x 迁移到 2.0](https://markstream.simonhe.me/zh/guide/migration-2-0)。
|
|
616
631
|
|
|
617
632
|
## 🧭 案例与展示
|
|
618
633
|
|
|
@@ -633,14 +648,14 @@ setCustomComponents('docs', {
|
|
|
633
648
|
|
|
634
649
|
- ⚡ 极致性能:为流式场景设计的最小化重渲染和高效 DOM 更新
|
|
635
650
|
- 🌊 流式优先:原生支持不完整或频繁更新的 token 化 Markdown 内容
|
|
636
|
-
- 🧠
|
|
651
|
+
- 🧠 增强代码块:`stream-diffs` File/Diff 界面,支持语法高亮与 diff 交互
|
|
637
652
|
- 🪄 渐进式 Mermaid:图表在语法可用时即时渲染,并在后续更新中完善
|
|
638
653
|
- 🧩 自定义组件:允许在 Markdown 内容中嵌入对应框架组件
|
|
639
654
|
- 📝 完整 Markdown 支持:表格、公式、Emoji、复选框、代码块等
|
|
640
655
|
- 🔄 实时更新:支持增量内容而不破坏格式
|
|
641
656
|
- 📦 TypeScript 优先:提供完善的类型定义与智能提示
|
|
642
657
|
- 🔌 默认配置:各框架入口开箱即可接入
|
|
643
|
-
- 🎨
|
|
658
|
+
- 🎨 增强代码块渲染:`stream-diffs` File/Diff 界面(`CodeBlockNode`),未安装该 peer 时回退为普通 `<pre>`
|
|
644
659
|
- 🧰 解析工具集:[`stream-markdown-parser`](./packages/markdown-parser) 文档现已覆盖如何在 Worker/SSE 流中复用解析器、直接向 `<MarkdownRender :nodes>` 输送 AST、以及注册全局插件/数学辅助函数的方式。
|
|
645
660
|
|
|
646
661
|
## 🙌 贡献与社区
|
|
@@ -688,10 +703,8 @@ https://github.com/Simon-He95/markstream-vue/issues
|
|
|
688
703
|
本项目使用并受益于:
|
|
689
704
|
|
|
690
705
|
- [stream-diffs](https://github.com/Simon-He95/stream-diffs)
|
|
691
|
-
- [stream-markdown](https://github.com/Simon-He95/stream-markdown)
|
|
692
706
|
- [mermaid](https://mermaid-js.github.io/mermaid)
|
|
693
707
|
- [katex](https://katex.org/)
|
|
694
|
-
- [shiki](https://github.com/shikijs/shiki)
|
|
695
708
|
- [markdown-it-ts](https://github.com/Simon-He95/markdown-it-ts)
|
|
696
709
|
|
|
697
710
|
感谢这些项目的作者与贡献者!
|