Skip to content

Commit 1e32736

Browse files
committed
docs: update Chinese README to match English
1 parent 02cb3b6 commit 1e32736

File tree

2 files changed

+387
-468
lines changed

2 files changed

+387
-468
lines changed

README.md

Lines changed: 45 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,15 @@ These features make the library especially suited for real-time, AI-driven, and
6161
- [Streaming playground](https://vue-markdown-renderer.simonhe.me/) — try large Markdown files and progressive diagrams to feel the difference.
6262
- [Markdown vs v-html comparison](https://vue-markdown-renderer.simonhe.me/markdown) — contrast the library's reactive rendering with a traditional static pipeline.
6363

64+
### Intro Video
65+
66+
This short video introduces the vue-renderer-markdown component library and highlights key features and usage patterns.
67+
68+
[![Watch the intro on Bilibili](https://i1.hdslb.com/bfs/archive/f073718bd0e51acaea436d7197880478213113c6.jpg)](https://www.bilibili.com/video/BV17Z4qzpE9c/)
69+
70+
Watch the intro on Bilibili: [Open in Bilibili](https://www.bilibili.com/video/BV17Z4qzpE9c/)
71+
72+
6473
## Features
6574

6675
-**Ultra-High Performance**: Optimized for real-time streaming with minimal re-renders and efficient DOM updates
@@ -882,6 +891,42 @@ Notes:
882891
import type { MyMarkdownProps } from 'vue-renderer-markdown/dist/types'
883892
```
884893
894+
895+
## Vite Configuration & Worker Usage (Important!)
896+
897+
If you're using Vite, you only need the following minimal configuration:
898+
899+
```typescript
900+
import vue from '@vitejs/plugin-vue'
901+
// vite.config.ts
902+
import { defineConfig } from 'vite'
903+
904+
export default defineConfig({
905+
plugins: [vue()],
906+
worker: {
907+
format: 'es',
908+
},
909+
})
910+
```
911+
912+
## Using Web Workers for KaTeX and Mermaid (Important!)
913+
914+
You must import the worker using Vite's `?worker` syntax and inject it into the library via the API:
915+
916+
```ts
917+
// main.ts or your app entry
918+
import KatexWorker from 'vue-renderer-markdown/workers/katexRenderer.worker?worker'
919+
import { setKaTeXWorker } from 'vue-renderer-markdown/workers/katexWorkerClient'
920+
921+
// For Mermaid:
922+
import MermaidWorker from 'vue-renderer-markdown/workers/mermaidParser.worker?worker'
923+
import { setMermaidWorker } from 'vue-renderer-markdown/workers/mermaidWorkerClient'
924+
925+
setKaTeXWorker(new KatexWorker())
926+
927+
setMermaidWorker(new MermaidWorker())
928+
```
929+
885930
### ImageNode slots (placeholder / error)
886931
887932
`ImageNode` now supports two named slots so you can customize the loading and error states:
@@ -1570,42 +1615,3 @@ Thanks to the authors and contributors of these projects!
15701615
## License
15711616
15721617
[MIT](./LICENSE) © [Simon He](https://github.com/Simon-He95)
1573-
1574-
## Vite Configuration & Worker Usage (Important!)
1575-
1576-
If you're using Vite, you only need the following minimal configuration:
1577-
1578-
```typescript
1579-
import vue from '@vitejs/plugin-vue'
1580-
// vite.config.ts
1581-
import { defineConfig } from 'vite'
1582-
1583-
export default defineConfig({
1584-
plugins: [vue()],
1585-
worker: {
1586-
format: 'es',
1587-
},
1588-
})
1589-
```
1590-
1591-
> **Why?** You now manually import and set workers via API, so Vite's optimizeDeps is not needed for worker files. This avoids pre-bundling issues and makes configuration simpler.
1592-
1593-
#### How to use workers in your app (Vite example)
1594-
1595-
You must import the worker using Vite's `?worker` syntax and inject it into the library via the API:
1596-
1597-
```ts
1598-
// main.ts or your app entry
1599-
import KatexWorker from 'vue-renderer-markdown/workers/katexRenderer.worker?worker'
1600-
import { setKaTeXWorker } from 'vue-renderer-markdown/workers/katexWorkerClient'
1601-
1602-
// For Mermaid:
1603-
import MermaidWorker from 'vue-renderer-markdown/workers/mermaidParser.worker?worker'
1604-
import { setMermaidWorker } from 'vue-renderer-markdown/workers/mermaidWorkerClient'
1605-
1606-
setKaTeXWorker(new KatexWorker())
1607-
1608-
setMermaidWorker(new MermaidWorker())
1609-
```
1610-
1611-
> You do **not** need to pass the worker via component props. Just call the API once in your app entry before using Markdown components.

0 commit comments

Comments
 (0)