You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+45-39Lines changed: 45 additions & 39 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -61,6 +61,15 @@ These features make the library especially suited for real-time, AI-driven, and
61
61
-[Streaming playground](https://vue-markdown-renderer.simonhe.me/) — try large Markdown files and progressive diagrams to feel the difference.
62
62
-[Markdown vs v-html comparison](https://vue-markdown-renderer.simonhe.me/markdown) — contrast the library's reactive rendering with a traditional static pipeline.
63
63
64
+
### Intro Video
65
+
66
+
This short video introduces the vue-renderer-markdown component library and highlights key features and usage patterns.
67
+
68
+
[](https://www.bilibili.com/video/BV17Z4qzpE9c/)
69
+
70
+
Watch the intro on Bilibili: [Open in Bilibili](https://www.bilibili.com/video/BV17Z4qzpE9c/)
71
+
72
+
64
73
## Features
65
74
66
75
- ⚡ **Ultra-High Performance**: Optimized for real-time streaming with minimal re-renders and efficient DOM updates
@@ -882,6 +891,42 @@ Notes:
882
891
import type { MyMarkdownProps } from 'vue-renderer-markdown/dist/types'
883
892
```
884
893
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
+
885
930
### ImageNode slots (placeholder / error)
886
931
887
932
`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!
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