markstream-vue 0.0.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 +73 -0
- package/README.zh-CN.md +74 -0
- package/dist/index.cjs +319 -0
- package/dist/index.css +1 -0
- package/dist/index.d.ts +966 -0
- package/dist/index.js +13740 -0
- package/dist/index.tailwind.css +1 -0
- package/dist/tailwind.ts +0 -0
- package/dist/workers/katexRenderer.worker.js +44 -0
- package/dist/workers/mermaidParser.worker.js +92 -0
- package/license +21 -0
- package/package.json +164 -0
package/README.md
ADDED
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
# markstream-vue
|
|
2
|
+
|
|
3
|
+
> Fast, streaming-friendly Markdown rendering for Vue 3 — progressive Mermaid, streaming diff code blocks, and real-time previews optimized for large documents.
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/markstream-vue)
|
|
6
|
+
[](README.zh-CN.md)
|
|
7
|
+
[](https://vue-markdown-renderer-docs.simonhe.me/)
|
|
8
|
+
[](https://www.npmjs.com/package/markstream-vue)
|
|
9
|
+
[](https://bundlephobia.com/package/markstream-vue)
|
|
10
|
+
[](./LICENSE)
|
|
11
|
+
|
|
12
|
+
> 📖 All detailed documentation, API, examples, and advanced usage have been migrated to the VitePress documentation site:
|
|
13
|
+
> https://vue-markdown-renderer-docs.simonhe.me/guide/
|
|
14
|
+
|
|
15
|
+
## 🚀 Playground & Demo
|
|
16
|
+
|
|
17
|
+
- Playground (interactive demo): https://vue-markdown-renderer.simonhe.me/
|
|
18
|
+
- Interactive test page: https://vue-markdown-renderer.simonhe.me/test
|
|
19
|
+
|
|
20
|
+
Try the interactive test page to quickly verify and debug:
|
|
21
|
+
https://vue-markdown-renderer.simonhe.me/test
|
|
22
|
+
|
|
23
|
+
This page provides a left editor and right live preview (powered by this library). It includes "generate & copy share link" functionality, encoding your input into the URL for sharing. If the input is too long, fallback options are provided to open directly or pre-fill a GitHub Issue.
|
|
24
|
+
|
|
25
|
+
You can use this page to reproduce rendering issues, verify math/Mermaid/code block behavior, and quickly generate shareable links or reproducible issues.
|
|
26
|
+
|
|
27
|
+
## 📺 Introduction Video
|
|
28
|
+
|
|
29
|
+
A short video introduces the key features and usage of markstream-vue:
|
|
30
|
+
|
|
31
|
+
[](https://www.bilibili.com/video/BV17Z4qzpE9c/)
|
|
32
|
+
|
|
33
|
+
Watch on Bilibili: [Open in Bilibili](https://www.bilibili.com/video/BV17Z4qzpE9c/)
|
|
34
|
+
|
|
35
|
+
## Features
|
|
36
|
+
|
|
37
|
+
- ⚡ Extreme performance: minimal re-rendering and efficient DOM updates for streaming scenarios
|
|
38
|
+
- 🌊 Streaming-first: native support for incomplete or frequently updated tokenized Markdown
|
|
39
|
+
- 🧠 Monaco streaming updates: high-performance Monaco integration for smooth incremental updates of large code blocks
|
|
40
|
+
- 🪄 Progressive Mermaid: charts render instantly when syntax is available, and improve with later updates
|
|
41
|
+
- 🧩 Custom components: embed custom Vue components in Markdown content
|
|
42
|
+
- 📝 Full Markdown support: tables, formulas, emoji, checkboxes, code blocks, etc.
|
|
43
|
+
- 🔄 Real-time updates: supports incremental content without breaking formatting
|
|
44
|
+
- 📦 TypeScript-first: complete type definitions and IntelliSense
|
|
45
|
+
- 🔌 Zero config: works out of the box in Vue 3 projects
|
|
46
|
+
- 🎨 Flexible code block rendering: choose Monaco editor (`CodeBlockNode`) or lightweight Shiki highlighting (`MarkdownCodeBlockNode`)
|
|
47
|
+
|
|
48
|
+
## Troubleshooting & Common Issues
|
|
49
|
+
|
|
50
|
+
Troubleshooting has moved into the docs:
|
|
51
|
+
https://vue-markdown-renderer-docs.simonhe.me/guide/troubleshooting
|
|
52
|
+
|
|
53
|
+
If you can't find a solution there, open a GitHub issue:
|
|
54
|
+
https://github.com/Simon-He95/vue-markdown-render/issues
|
|
55
|
+
|
|
56
|
+
## Thanks
|
|
57
|
+
|
|
58
|
+
This project uses and benefits from:
|
|
59
|
+
- [stream-monaco](https://github.com/Simon-He95/stream-monaco)
|
|
60
|
+
- [stream-markdown](https://github.com/Simon-He95/stream-markdown)
|
|
61
|
+
- [mermaid](https://mermaid-js.github.io/mermaid)
|
|
62
|
+
- [shiki](https://github.com/shikijs/shiki)
|
|
63
|
+
- [markdown-it-ts](https://github.com/Simon-He95/markdown-it-ts)
|
|
64
|
+
|
|
65
|
+
Thanks to the authors and contributors of these projects!
|
|
66
|
+
|
|
67
|
+
## Star History
|
|
68
|
+
|
|
69
|
+
[](https://www.star-history.com/#Simon-He95/vue-markdown-render&Date)
|
|
70
|
+
|
|
71
|
+
## License
|
|
72
|
+
|
|
73
|
+
[MIT](./LICENSE) © [Simon He](https://github.com/Simon-He95)
|
package/README.zh-CN.md
ADDED
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
# markstream-vue
|
|
2
|
+
|
|
3
|
+
> 针对 Vue 3 的高性能、流式友好型 Markdown 渲染组件 — 支持渐进式 Mermaid、流式 diff 代码块以及为大文档优化的实时预览。
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/markstream-vue)
|
|
6
|
+
[](https://vue-markdown-renderer-docs.simonhe.me/zh/guide/)
|
|
7
|
+
[](https://www.npmjs.com/package/markstream-vue)
|
|
8
|
+
[](https://bundlephobia.com/package/markstream-vue)
|
|
9
|
+
[](./LICENSE)
|
|
10
|
+
|
|
11
|
+
> 📖 所有详细文档、API、示例和高级用法已迁移至 VitePress 中文文档站点：
|
|
12
|
+
> https://vue-markdown-renderer-docs.simonhe.me/zh/guide/
|
|
13
|
+
|
|
14
|
+
## 🚀 实时演示
|
|
15
|
+
|
|
16
|
+
- Playground（交互演示）： https://vue-markdown-renderer.simonhe.me/
|
|
17
|
+
- 交互测试页面： https://vue-markdown-renderer.simonhe.me/test
|
|
18
|
+
|
|
19
|
+
### 交互测试页面
|
|
20
|
+
|
|
21
|
+
- 试用交互式测试页面以便快速验证与调试： https://vue-markdown-renderer.simonhe.me/test
|
|
22
|
+
|
|
23
|
+
此页面提供左侧编辑器与右侧实时预览（由本库驱动）。页面包含“生成并复制分享链接”功能，会将你的输入编码到 URL 中以便分享；当输入过长无法嵌入 URL 时，会提供直接打开或预填 GitHub Issue 的回退流程。
|
|
24
|
+
|
|
25
|
+
你可以使用该页面复现渲染问题，验证数学公式 / Mermaid / 代码块的渲染行为，并快速生成可共享链接或带复现信息的 issue。
|
|
26
|
+
|
|
27
|
+
### 介绍视频
|
|
28
|
+
|
|
29
|
+
一段短视频介绍了 markstream-vue 的关键特性与使用方式。
|
|
30
|
+
|
|
31
|
+
[](https://www.bilibili.com/video/BV17Z4qzpE9c/)
|
|
32
|
+
|
|
33
|
+
在 Bilibili 上观看： [Open in Bilibili](https://www.bilibili.com/video/BV17Z4qzpE9c/)
|
|
34
|
+
|
|
35
|
+
## 快速链接
|
|
36
|
+
|
|
37
|
+
- ⚡ 极致性能：为流式场景设计的最小化重渲染和高效 DOM 更新
|
|
38
|
+
- 🌊 流式优先：原生支持不完整或频繁更新的 token 化 Markdown 内容
|
|
39
|
+
- 🧠 Monaco 流式更新：高性能的 Monaco 集成，支持大代码块的平滑增量更新
|
|
40
|
+
- 🪄 渐进式 Mermaid：图表在语法可用时即时渲染，并在后续更新中完善
|
|
41
|
+
- 🧩 自定义组件：允许在 Markdown 内容中嵌入自定义 Vue 组件
|
|
42
|
+
- 📝 完整 Markdown 支持：表格、公式、Emoji、复选框、代码块等
|
|
43
|
+
- 🔄 实时更新：支持增量内容而不破坏格式
|
|
44
|
+
- 📦 TypeScript 优先：提供完善的类型定义与智能提示
|
|
45
|
+
- 🔌 零配置：开箱即可在 Vue 3 项目中使用
|
|
46
|
+
- 🎨 灵活的代码块渲染：可选 Monaco 编辑器 (`CodeBlockNode`) 或轻量的 Shiki 高亮 (`MarkdownCodeBlockNode`)
|
|
47
|
+
|
|
48
|
+
## 故障排查 & 常见问题
|
|
49
|
+
|
|
50
|
+
详细故障排查与常见问题已迁移至文档站点：
|
|
51
|
+
https://vue-markdown-renderer-docs.simonhe.me/zh/guide/troubleshooting
|
|
52
|
+
|
|
53
|
+
如需更多帮助，请到 GitHub Issues 创建问题：
|
|
54
|
+
https://github.com/Simon-He95/vue-markdown-render/issues
|
|
55
|
+
|
|
56
|
+
## 鸣谢
|
|
57
|
+
|
|
58
|
+
本项目使用并受益于：
|
|
59
|
+
|
|
60
|
+
- [stream-monaco](https://github.com/Simon-He95/stream-monaco)
|
|
61
|
+
- [stream-markdown](https://github.com/Simon-He95/stream-markdown)
|
|
62
|
+
- [mermaid](https://mermaid-js.github.io/mermaid)
|
|
63
|
+
- [shiki](https://github.com/shikijs/shiki)
|
|
64
|
+
- [markdown-it-ts](https://github.com/Simon-He95/markdown-it-ts)
|
|
65
|
+
|
|
66
|
+
感谢这些项目的作者与贡献者！
|
|
67
|
+
|
|
68
|
+
## Star 历史
|
|
69
|
+
|
|
70
|
+
[](https://www.star-history.com/#Simon-He95/vue-markdown-render&Date)
|
|
71
|
+
|
|
72
|
+
## 许可
|
|
73
|
+
|
|
74
|
+
[MIT](./LICENSE) © [Simon He](https://github.com/Simon-He95)
|