mio-previewer 0.1.4 → 0.1.6
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 +408 -141
- package/README.zh-CN.md +404 -125
- package/dist/{_basePickBy-wjzVR2ZI.cjs → _basePickBy-CWzy8CIJ.cjs} +1 -1
- package/dist/{_basePickBy-ClXR16YL.js → _basePickBy-m5_T47yz.js} +2 -2
- package/dist/{_baseUniq-BvAvxwqe.js → _baseUniq-BnywwJBY.js} +1 -1
- package/dist/{_baseUniq-BtmrXn_-.cjs → _baseUniq-DzAGUMoa.cjs} +1 -1
- package/dist/{arc-CBMtpv9r.cjs → arc-BAZxwgoG.cjs} +1 -1
- package/dist/{arc-Hx3N9DvE.js → arc-BDHD79aE.js} +1 -1
- package/dist/{architecture-O4VJ6CD3-BNArGrzK.cjs → architecture-O4VJ6CD3-B3mtkY33.cjs} +1 -1
- package/dist/{architecture-O4VJ6CD3-xCUefH5y.js → architecture-O4VJ6CD3-DXA5X_yx.js} +1 -1
- package/dist/{architectureDiagram-VXUJARFQ-BJuzZIv9.cjs → architectureDiagram-VXUJARFQ-CBEmF4c4.cjs} +1 -1
- package/dist/{architectureDiagram-VXUJARFQ-B6mJb2i9.js → architectureDiagram-VXUJARFQ-WrHvlvqz.js} +3 -3
- package/dist/{blockDiagram-VD42YOAC-BGxFHnMs.js → blockDiagram-VD42YOAC-B8yzpSUt.js} +5 -5
- package/dist/{blockDiagram-VD42YOAC-CG3089Xu.cjs → blockDiagram-VD42YOAC-iGUQhHOa.cjs} +1 -1
- package/dist/{c4Diagram-YG6GDRKO-Cmg_2WS3.cjs → c4Diagram-YG6GDRKO-BC0oVCkM.cjs} +1 -1
- package/dist/{c4Diagram-YG6GDRKO-Rr7zONcv.js → c4Diagram-YG6GDRKO-r1vmxT4H.js} +2 -2
- package/dist/{channel-DgGKpNRA.js → channel-BlCmYLjm.js} +1 -1
- package/dist/channel-CybseUM2.cjs +1 -0
- package/dist/{chunk-4BX2VUAB-Bt9zCVip.cjs → chunk-4BX2VUAB-6PxxKRiV.cjs} +1 -1
- package/dist/{chunk-4BX2VUAB-BbICN0Ec.js → chunk-4BX2VUAB-BvRfkHhg.js} +1 -1
- package/dist/{chunk-55IACEB6-DYOSrdgH.js → chunk-55IACEB6-B6RNQ_Dl.js} +1 -1
- package/dist/{chunk-55IACEB6-CBJvnwMn.cjs → chunk-55IACEB6-BaqZa58T.cjs} +1 -1
- package/dist/{chunk-B4BG7PRW-l7q-a31H.cjs → chunk-B4BG7PRW-B2nNYsy_.cjs} +1 -1
- package/dist/{chunk-B4BG7PRW-TxrPoDdp.js → chunk-B4BG7PRW-DlrKAjak.js} +4 -4
- package/dist/{chunk-DI55MBZ5-Bp0pNyM4.cjs → chunk-DI55MBZ5-BUn8iSqn.cjs} +1 -1
- package/dist/{chunk-DI55MBZ5-CsB2AXBx.js → chunk-DI55MBZ5-CZnuDYt1.js} +3 -3
- package/dist/{chunk-FMBD7UC4-D5PKNbki.js → chunk-FMBD7UC4-Kiqgsjq0.js} +1 -1
- package/dist/{chunk-FMBD7UC4-BcpCv0n4.cjs → chunk-FMBD7UC4-QZu7cQhg.cjs} +1 -1
- package/dist/{chunk-QN33PNHL-B5zdVrte.js → chunk-QN33PNHL-CN23wkk5.js} +1 -1
- package/dist/{chunk-QN33PNHL-B1Px0282.cjs → chunk-QN33PNHL-NFeQwU1C.cjs} +1 -1
- package/dist/{chunk-QZHKN3VN-Dg1DeAnJ.cjs → chunk-QZHKN3VN-Bq63ipAz.cjs} +1 -1
- package/dist/{chunk-QZHKN3VN-C-Vfb6xz.js → chunk-QZHKN3VN-DRwz5CXr.js} +1 -1
- package/dist/{chunk-TZMSLE5B-xm8uzxSg.js → chunk-TZMSLE5B-Bwr0045t.js} +1 -1
- package/dist/{chunk-TZMSLE5B-Bd4ivTqX.cjs → chunk-TZMSLE5B-Dp8UhykY.cjs} +1 -1
- package/dist/{classDiagram-2ON5EDUG-DaNkCwSZ.cjs → classDiagram-2ON5EDUG-CWAjzXtp.cjs} +1 -1
- package/dist/{classDiagram-v2-WZHVMYZB-CK_iHiNY.js → classDiagram-2ON5EDUG-DxjNGm48.js} +2 -2
- package/dist/{classDiagram-v2-WZHVMYZB-DaNkCwSZ.cjs → classDiagram-v2-WZHVMYZB-CWAjzXtp.cjs} +1 -1
- package/dist/{classDiagram-2ON5EDUG-CK_iHiNY.js → classDiagram-v2-WZHVMYZB-DxjNGm48.js} +2 -2
- package/dist/clone-W1VAscty.cjs +1 -0
- package/dist/{clone-Bha0jTOw.js → clone-xXnwx9JX.js} +1 -1
- package/dist/{cose-bilkent-S5V4N54A-CV1wgztW.cjs → cose-bilkent-S5V4N54A-DGtDnCf_.cjs} +1 -1
- package/dist/{cose-bilkent-S5V4N54A-hCsgqyKM.js → cose-bilkent-S5V4N54A-DwACfiOr.js} +1 -1
- package/dist/{custom-DUStvHau.cjs → custom-BB9B2BL2.cjs} +90 -48
- package/dist/{custom-B4yTjcNy.js → custom-C1QhDj-y.js} +3153 -3094
- package/dist/{dagre-6UL2VRFP-yXKAxpPT.cjs → dagre-6UL2VRFP-B7OkXNwm.cjs} +1 -1
- package/dist/{dagre-6UL2VRFP-DgeWg1SE.js → dagre-6UL2VRFP-D8jgPXZB.js} +6 -6
- package/dist/{diagram-PSM6KHXK-Cvtq1BMM.js → diagram-PSM6KHXK-CVislPq4.js} +4 -4
- package/dist/{diagram-PSM6KHXK-D8-R7SoU.cjs → diagram-PSM6KHXK-DSJu8JZ6.cjs} +1 -1
- package/dist/{diagram-QEK2KX5R-BJwfOJRv.cjs → diagram-QEK2KX5R-CoE4joH1.cjs} +1 -1
- package/dist/{diagram-QEK2KX5R-Bk1U0LhS.js → diagram-QEK2KX5R-JH3FlTXl.js} +3 -3
- package/dist/{diagram-S2PKOQOG-C1GhQvXr.js → diagram-S2PKOQOG-BgorvXyP.js} +3 -3
- package/dist/{diagram-S2PKOQOG-CrU1lFAd.cjs → diagram-S2PKOQOG-CtcEZ9xO.cjs} +1 -1
- package/dist/{erDiagram-Q2GNP2WA-DwCMcLlJ.cjs → erDiagram-Q2GNP2WA-DjGQSNEd.cjs} +1 -1
- package/dist/{erDiagram-Q2GNP2WA-BW644HGe.js → erDiagram-Q2GNP2WA-DyFoT35Q.js} +4 -4
- package/dist/{flowDiagram-NV44I4VS-wXa2zQjd.js → flowDiagram-NV44I4VS-Bp-q8kkE.js} +5 -5
- package/dist/{flowDiagram-NV44I4VS-CwBt-lqk.cjs → flowDiagram-NV44I4VS-C5_i8vKb.cjs} +1 -1
- package/dist/{ganttDiagram-LVOFAZNH-CFZ-PmU5.cjs → ganttDiagram-LVOFAZNH-CWj5yJz4.cjs} +1 -1
- package/dist/{ganttDiagram-LVOFAZNH-DEQvlmR2.js → ganttDiagram-LVOFAZNH-D5BjYh4O.js} +2 -2
- package/dist/{gitGraph-ZV4HHKMB-CbfGP-N9.cjs → gitGraph-ZV4HHKMB-6xujjpfY.cjs} +1 -1
- package/dist/{gitGraph-ZV4HHKMB-Bd_PHDMp.js → gitGraph-ZV4HHKMB-CMC3ZF2n.js} +1 -1
- package/dist/{gitGraphDiagram-NY62KEGX-j4D9jXL4.cjs → gitGraphDiagram-NY62KEGX-Bijj3zxW.cjs} +1 -1
- package/dist/{gitGraphDiagram-NY62KEGX-xl70htLN.js → gitGraphDiagram-NY62KEGX-DYmh2kRW.js} +4 -4
- package/dist/{graph-D6yOZd92.js → graph-D3gnYK1X.js} +2 -2
- package/dist/{graph-6iViBDku.cjs → graph-DFTHBY71.cjs} +1 -1
- package/dist/info-63CPKGFF-BLYzhYAj.js +5 -0
- package/dist/{info-63CPKGFF-gOwyweiZ.cjs → info-63CPKGFF-CEKaKKTJ.cjs} +1 -1
- package/dist/{infoDiagram-F6ZHWCRC-Vx_DX2z8.cjs → infoDiagram-F6ZHWCRC-CGakmtht.cjs} +1 -1
- package/dist/{infoDiagram-F6ZHWCRC-BfGS0mg6.js → infoDiagram-F6ZHWCRC-CvuN8Xe0.js} +2 -2
- package/dist/{journeyDiagram-XKPGCS4Q-C74m57vy.js → journeyDiagram-XKPGCS4Q-CMD1dNlA.js} +4 -4
- package/dist/{journeyDiagram-XKPGCS4Q-Cwfm3gkE.cjs → journeyDiagram-XKPGCS4Q-NZ7Zwwno.cjs} +1 -1
- package/dist/{kanban-definition-3W4ZIXB7-CgUhoGem.cjs → kanban-definition-3W4ZIXB7-DKjyogIQ.cjs} +1 -1
- package/dist/{kanban-definition-3W4ZIXB7-Zs307aAz.js → kanban-definition-3W4ZIXB7-DdiLRhLn.js} +2 -2
- package/dist/{layout-DiSbzXpp.cjs → layout-BKa4J6c-.cjs} +1 -1
- package/dist/{layout-BVJXml4k.js → layout-D4zQO2o2.js} +4 -4
- package/dist/{linear-CF8o0osj.cjs → linear-DZQR44UC.cjs} +1 -1
- package/dist/{linear-BE7L7Wq8.js → linear-DsHZ7VTP.js} +1 -1
- package/dist/{mermaid-parser.core-D8AljRep.cjs → mermaid-parser.core-DilcMT1B.cjs} +2 -2
- package/dist/{mermaid-parser.core-CvS4VcbX.js → mermaid-parser.core-scIqCLhe.js} +11 -11
- package/dist/{mindmap-definition-VGOIOE7T-BidsJOPm.cjs → mindmap-definition-VGOIOE7T-Ei8sTs44.cjs} +1 -1
- package/dist/{mindmap-definition-VGOIOE7T-BAXsNT0n.js → mindmap-definition-VGOIOE7T-tfBKngxr.js} +3 -3
- package/dist/mio-previewer.css +1 -1
- package/dist/{packet-HUATNLJX-CgY4KC5-.cjs → packet-HUATNLJX-DJA8At21.cjs} +1 -1
- package/dist/{packet-HUATNLJX-B1eLognS.js → packet-HUATNLJX-Dj4GcjQR.js} +1 -1
- package/dist/{pie-WTHONI2E-DBm7_2Ma.cjs → pie-WTHONI2E-B79PEY8l.cjs} +1 -1
- package/dist/pie-WTHONI2E-L2ei45O-.js +5 -0
- package/dist/{pieDiagram-ADFJNKIX-DTKW3svv.cjs → pieDiagram-ADFJNKIX-BIV_iyZL.cjs} +1 -1
- package/dist/{pieDiagram-ADFJNKIX-CWK1C9xc.js → pieDiagram-ADFJNKIX-CJrJzhlE.js} +4 -4
- package/dist/plugins/custom.cjs.js +1 -1
- package/dist/plugins/custom.es.js +1 -1
- package/dist/{quadrantDiagram-AYHSOK5B-BNrGATyu.js → quadrantDiagram-AYHSOK5B-42v2tFCR.js} +2 -2
- package/dist/{quadrantDiagram-AYHSOK5B-qLZyIHgG.cjs → quadrantDiagram-AYHSOK5B-UCGi708D.cjs} +1 -1
- package/dist/radar-NJJJXTRR-BF1JzV5Y.js +5 -0
- package/dist/{radar-NJJJXTRR-EpcDInzR.cjs → radar-NJJJXTRR-PPOjSXgX.cjs} +1 -1
- package/dist/{requirementDiagram-UZGBJVZJ-BTCSXGaW.cjs → requirementDiagram-UZGBJVZJ-CCCu9RXm.cjs} +1 -1
- package/dist/{requirementDiagram-UZGBJVZJ-CkxxLi7P.js → requirementDiagram-UZGBJVZJ-m_gma9iH.js} +3 -3
- package/dist/{sankeyDiagram-TZEHDZUN-BNlI2aP-.cjs → sankeyDiagram-TZEHDZUN-Dt6lrgnr.cjs} +1 -1
- package/dist/{sankeyDiagram-TZEHDZUN-DJ1q5E3K.js → sankeyDiagram-TZEHDZUN-eY44cJlE.js} +1 -1
- package/dist/{sequenceDiagram-WL72ISMW-CjMzI1c2.cjs → sequenceDiagram-WL72ISMW-CBoGDk3g.cjs} +1 -1
- package/dist/{sequenceDiagram-WL72ISMW-nQ6UBL1y.js → sequenceDiagram-WL72ISMW-Chw20cva.js} +3 -3
- package/dist/{stateDiagram-FKZM4ZOC-Dr_-m8dE.js → stateDiagram-FKZM4ZOC-3yy_Kvnk.js} +4 -4
- package/dist/{stateDiagram-FKZM4ZOC-BBEPk90z.cjs → stateDiagram-FKZM4ZOC-t7WnWKbx.cjs} +1 -1
- package/dist/{stateDiagram-v2-4FDKWEC3-D7NtOxif.cjs → stateDiagram-v2-4FDKWEC3-Ct9Imkjc.cjs} +1 -1
- package/dist/{stateDiagram-v2-4FDKWEC3-CG--f0tc.js → stateDiagram-v2-4FDKWEC3-DELyMBBc.js} +2 -2
- package/dist/{timeline-definition-IT6M3QCI-d0F8eBhC.js → timeline-definition-IT6M3QCI-DSbrx1um.js} +2 -2
- package/dist/{timeline-definition-IT6M3QCI-2DClSZLV.cjs → timeline-definition-IT6M3QCI-imDDAjaW.cjs} +1 -1
- package/dist/{treemap-75Q7IDZK-BBuuvHE0.js → treemap-75Q7IDZK-Bwj_esWs.js} +1 -1
- package/dist/{treemap-75Q7IDZK-CI86AmBT.cjs → treemap-75Q7IDZK-DaCs42wt.cjs} +1 -1
- package/dist/{xychartDiagram-PRI3JC2R-BkUjTJNu.cjs → xychartDiagram-PRI3JC2R-CBaFcd4q.cjs} +1 -1
- package/dist/{xychartDiagram-PRI3JC2R-DLXTvnDG.js → xychartDiagram-PRI3JC2R-CpYE-5EP.js} +2 -2
- package/package.json +1 -1
- package/dist/channel-BleEicRr.cjs +0 -1
- package/dist/clone-C1QAYyzI.cjs +0 -1
- package/dist/info-63CPKGFF-du1jd1Lv.js +0 -5
- package/dist/pie-WTHONI2E-RplLoGbc.js +0 -5
- package/dist/radar-NJJJXTRR-DRmyBDWp.js +0 -5
package/README.zh-CN.md
CHANGED
|
@@ -2,205 +2,484 @@
|
|
|
2
2
|
|
|
3
3
|
[English](./README.md) | 中文文档
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
一个针对流式更新优化的 Vue 3 Markdown 渲染器,具有强大的插件系统。支持实时渲染、语法高亮、数学公式、图表等功能。
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
✨ **核心特性:**
|
|
8
|
+
- 🚀 支持流式实时渲染
|
|
9
|
+
- 🎨 内置语法高亮(Prism.js,20+ 种语言)
|
|
10
|
+
- 📐 数学公式支持(KaTeX)
|
|
11
|
+
- 📊 图表渲染(Mermaid)
|
|
12
|
+
- 🔌 可扩展的插件系统
|
|
13
|
+
- 📦 支持 Tree-shaking,轻量级
|
|
14
|
+
- 🎯 TypeScript 支持
|
|
8
15
|
|
|
9
|
-
|
|
10
|
-
- `isStreaming=true` — 在末尾显示闪烁光标,表示内容正在流式更新中。
|
|
16
|
+
## 安装
|
|
11
17
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
18
|
+
```bash
|
|
19
|
+
npm install mio-previewer
|
|
20
|
+
# 或
|
|
21
|
+
pnpm add mio-previewer
|
|
22
|
+
# 或
|
|
23
|
+
yarn add mio-previewer
|
|
24
|
+
```
|
|
15
25
|
|
|
16
26
|
## 快速开始
|
|
17
27
|
|
|
18
|
-
|
|
28
|
+
### 基础用法
|
|
19
29
|
|
|
20
|
-
|
|
30
|
+
```vue
|
|
31
|
+
<template>
|
|
32
|
+
<MdRenderer :md="markdown" />
|
|
33
|
+
</template>
|
|
21
34
|
|
|
22
|
-
|
|
23
|
-
|
|
35
|
+
<script setup>
|
|
36
|
+
import { ref } from 'vue'
|
|
37
|
+
import { MdRenderer } from 'mio-previewer'
|
|
38
|
+
import 'mio-previewer/dist/mio-previewer.css'
|
|
39
|
+
|
|
40
|
+
const markdown = ref('# Hello World\n\n这是 **Markdown** 渲染!')
|
|
41
|
+
</script>
|
|
24
42
|
```
|
|
25
43
|
|
|
26
|
-
|
|
44
|
+
### 流式模式
|
|
27
45
|
|
|
28
|
-
|
|
46
|
+
适用于 AI 聊天机器人或实时内容展示:
|
|
29
47
|
|
|
30
|
-
```
|
|
31
|
-
|
|
48
|
+
```vue
|
|
49
|
+
<template>
|
|
50
|
+
<MdRenderer
|
|
51
|
+
:md="streamContent"
|
|
52
|
+
:isStreaming="isStreaming"
|
|
53
|
+
/>
|
|
54
|
+
</template>
|
|
55
|
+
|
|
56
|
+
<script setup>
|
|
57
|
+
import { ref } from 'vue'
|
|
58
|
+
import { MdRenderer } from 'mio-previewer'
|
|
59
|
+
import 'mio-previewer/dist/mio-previewer.css'
|
|
60
|
+
|
|
61
|
+
const streamContent = ref('')
|
|
62
|
+
const isStreaming = ref(true)
|
|
63
|
+
|
|
64
|
+
// 模拟流式输出
|
|
65
|
+
const text = '# 流式演示\n\n内容**逐步**出现...'
|
|
66
|
+
let index = 0
|
|
67
|
+
|
|
68
|
+
const interval = setInterval(() => {
|
|
69
|
+
if (index < text.length) {
|
|
70
|
+
streamContent.value += text[index++]
|
|
71
|
+
} else {
|
|
72
|
+
isStreaming.value = false
|
|
73
|
+
clearInterval(interval)
|
|
74
|
+
}
|
|
75
|
+
}, 50)
|
|
76
|
+
</script>
|
|
32
77
|
```
|
|
33
78
|
|
|
34
|
-
|
|
79
|
+
## 插件系统
|
|
35
80
|
|
|
36
|
-
|
|
81
|
+
### 使用内置插件
|
|
37
82
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
83
|
+
#### 数学公式(KaTeX)
|
|
84
|
+
|
|
85
|
+
```vue
|
|
86
|
+
<script setup>
|
|
87
|
+
import { MdRenderer } from 'mio-previewer'
|
|
88
|
+
import { katexPlugin } from 'mio-previewer/plugins/markdown-it'
|
|
89
|
+
import 'mio-previewer/dist/mio-previewer.css'
|
|
90
|
+
|
|
91
|
+
const markdown = \`
|
|
92
|
+
# 数学示例
|
|
93
|
+
|
|
94
|
+
行内公式:$E = mc^2$
|
|
95
|
+
|
|
96
|
+
块级公式:
|
|
97
|
+
$$
|
|
98
|
+
\\int_{-\\infty}^{\\infty} e^{-x^2} dx = \\sqrt{\\pi}
|
|
99
|
+
$$
|
|
100
|
+
\`
|
|
101
|
+
|
|
102
|
+
const markdownItPlugins = [
|
|
103
|
+
{ plugin: katexPlugin }
|
|
104
|
+
]
|
|
105
|
+
</script>
|
|
106
|
+
|
|
107
|
+
<template>
|
|
108
|
+
<MdRenderer
|
|
109
|
+
:md="markdown"
|
|
110
|
+
:markdownItPlugins="markdownItPlugins"
|
|
111
|
+
/>
|
|
112
|
+
</template>
|
|
41
113
|
```
|
|
42
114
|
|
|
43
|
-
|
|
115
|
+
#### 警告框
|
|
44
116
|
|
|
45
|
-
```
|
|
46
|
-
|
|
47
|
-
|
|
117
|
+
```vue
|
|
118
|
+
<script setup>
|
|
119
|
+
import { MdRenderer } from 'mio-previewer'
|
|
120
|
+
import { AlertPlugin } from 'mio-previewer/plugins/markdown-it'
|
|
121
|
+
import 'mio-previewer/dist/mio-previewer.css'
|
|
48
122
|
|
|
49
|
-
|
|
50
|
-
|
|
123
|
+
const markdown = \`
|
|
124
|
+
::: info
|
|
125
|
+
这是一个支持 **Markdown** 的 **info** 警告框!
|
|
126
|
+
:::
|
|
127
|
+
|
|
128
|
+
::: warning
|
|
129
|
+
⚠️ 警告信息
|
|
130
|
+
:::
|
|
131
|
+
|
|
132
|
+
::: error
|
|
133
|
+
❌ 错误信息
|
|
134
|
+
:::
|
|
135
|
+
|
|
136
|
+
::: success
|
|
137
|
+
✅ 成功信息
|
|
138
|
+
:::
|
|
139
|
+
\`
|
|
140
|
+
|
|
141
|
+
const markdownItPlugins = [
|
|
142
|
+
{ plugin: AlertPlugin }
|
|
143
|
+
]
|
|
144
|
+
</script>
|
|
145
|
+
|
|
146
|
+
<template>
|
|
147
|
+
<MdRenderer
|
|
148
|
+
:md="markdown"
|
|
149
|
+
:markdownItPlugins="markdownItPlugins"
|
|
150
|
+
/>
|
|
151
|
+
</template>
|
|
51
152
|
```
|
|
52
153
|
|
|
53
|
-
|
|
154
|
+
#### 代码高亮
|
|
54
155
|
|
|
55
|
-
```
|
|
56
|
-
|
|
156
|
+
```vue
|
|
157
|
+
<script setup>
|
|
57
158
|
import { MdRenderer } from 'mio-previewer'
|
|
58
|
-
import '
|
|
159
|
+
import { CodeBlockPlugin } from 'mio-previewer/plugins/custom'
|
|
160
|
+
import 'mio-previewer/dist/mio-previewer.css'
|
|
59
161
|
|
|
60
|
-
const
|
|
61
|
-
|
|
62
|
-
|
|
162
|
+
const markdown = \`
|
|
163
|
+
\\\`\\\`\\\`javascript
|
|
164
|
+
function hello() {
|
|
165
|
+
console.log('Hello World!')
|
|
166
|
+
}
|
|
167
|
+
\\\`\\\`\\\`
|
|
168
|
+
|
|
169
|
+
\\\`\\\`\\\`python
|
|
170
|
+
def greet():
|
|
171
|
+
print("你好,世界!")
|
|
172
|
+
\\\`\\\`\\\`
|
|
173
|
+
\`
|
|
174
|
+
|
|
175
|
+
const customPlugins = [CodeBlockPlugin]
|
|
176
|
+
</script>
|
|
177
|
+
|
|
178
|
+
<template>
|
|
179
|
+
<MdRenderer
|
|
180
|
+
:md="markdown"
|
|
181
|
+
:customPlugins="customPlugins"
|
|
182
|
+
/>
|
|
183
|
+
</template>
|
|
63
184
|
```
|
|
64
185
|
|
|
65
|
-
|
|
66
|
-
- 库打包时将 `vue` 标记为 external。发布时建议在你的 `package.json` 中加入 `peerDependencies: { "vue": "^3" }`,或在宿主项目中安装兼容的 Vue。
|
|
67
|
-
- 类型声明会输出到 `dist/types`,顶级 `types` 字段已指向生成的声明文件。
|
|
186
|
+
#### Mermaid 图表
|
|
68
187
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
188
|
+
```vue
|
|
189
|
+
<script setup>
|
|
190
|
+
import { MdRenderer } from 'mio-previewer'
|
|
191
|
+
import { mermaidPlugin } from 'mio-previewer/plugins/custom'
|
|
192
|
+
import 'mio-previewer/dist/mio-previewer.css'
|
|
193
|
+
|
|
194
|
+
const markdown = \`
|
|
195
|
+
\\\`\\\`\\\`mermaid
|
|
196
|
+
graph TD
|
|
197
|
+
A[开始] --> B{判断}
|
|
198
|
+
B -->|是| C[继续]
|
|
199
|
+
B -->|否| D[停止]
|
|
200
|
+
\\\`\\\`\\\`
|
|
201
|
+
\`
|
|
202
|
+
|
|
203
|
+
const customPlugins = [mermaidPlugin]
|
|
204
|
+
</script>
|
|
205
|
+
|
|
206
|
+
<template>
|
|
207
|
+
<MdRenderer
|
|
208
|
+
:md="markdown"
|
|
209
|
+
:customPlugins="customPlugins"
|
|
210
|
+
/>
|
|
211
|
+
</template>
|
|
212
|
+
```
|
|
73
213
|
|
|
74
|
-
|
|
214
|
+
#### Emoji 表情
|
|
75
215
|
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
216
|
+
```vue
|
|
217
|
+
<script setup>
|
|
218
|
+
import { MdRenderer } from 'mio-previewer'
|
|
219
|
+
import { EmojiPlugin } from 'mio-previewer/plugins/custom'
|
|
220
|
+
import 'mio-previewer/dist/mio-previewer.css'
|
|
80
221
|
|
|
81
|
-
|
|
222
|
+
const markdown = '你好 :smile: 欢迎! :tada: :rocket:'
|
|
82
223
|
|
|
83
|
-
|
|
224
|
+
const customPlugins = [EmojiPlugin]
|
|
225
|
+
</script>
|
|
84
226
|
|
|
85
|
-
|
|
86
|
-
|
|
227
|
+
<template>
|
|
228
|
+
<MdRenderer
|
|
229
|
+
:md="markdown"
|
|
230
|
+
:customPlugins="customPlugins"
|
|
231
|
+
/>
|
|
232
|
+
</template>
|
|
233
|
+
```
|
|
87
234
|
|
|
88
|
-
|
|
235
|
+
### 完整示例(使用所有插件)
|
|
89
236
|
|
|
90
|
-
|
|
237
|
+
```vue
|
|
238
|
+
<script setup>
|
|
239
|
+
import { ref } from 'vue'
|
|
240
|
+
import { MdRenderer } from 'mio-previewer'
|
|
241
|
+
import { AlertPlugin, katexPlugin } from 'mio-previewer/plugins/markdown-it'
|
|
242
|
+
import { mermaidPlugin, CodeBlockPlugin, EmojiPlugin } from 'mio-previewer/plugins/custom'
|
|
243
|
+
import 'mio-previewer/dist/mio-previewer.css'
|
|
91
244
|
|
|
92
|
-
|
|
245
|
+
const markdown = ref(\`# 完整演示 :rocket:
|
|
93
246
|
|
|
94
|
-
|
|
247
|
+
## 警告框
|
|
248
|
+
::: info
|
|
249
|
+
这是**重要**信息!
|
|
250
|
+
:::
|
|
95
251
|
|
|
96
|
-
|
|
252
|
+
## 数学公式
|
|
253
|
+
行内:$E = mc^2$
|
|
97
254
|
|
|
98
|
-
|
|
99
|
-
import { MdRenderer } from 'mio-previewer'
|
|
100
|
-
import markdownItSub from 'markdown-it-sub'
|
|
101
|
-
import markdownItSup from 'markdown-it-sup'
|
|
255
|
+
块级:$$\\sum_{n=1}^{\\infty} \\frac{1}{n^2} = \\frac{\\pi^2}{6}$$
|
|
102
256
|
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
257
|
+
## 代码
|
|
258
|
+
\\\`\\\`\\\`javascript
|
|
259
|
+
console.log('你好,世界!')
|
|
260
|
+
\\\`\\\`\\\`
|
|
107
261
|
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
/>
|
|
114
|
-
```
|
|
262
|
+
## 图表
|
|
263
|
+
\\\`\\\`\\\`mermaid
|
|
264
|
+
graph LR
|
|
265
|
+
A --> B --> C
|
|
266
|
+
\\\`\\\`\\\`
|
|
115
267
|
|
|
116
|
-
|
|
268
|
+
做得好! :thumbsup: :100:
|
|
269
|
+
\`)
|
|
117
270
|
|
|
118
|
-
|
|
271
|
+
const customPlugins = [
|
|
272
|
+
mermaidPlugin,
|
|
273
|
+
CodeBlockPlugin,
|
|
274
|
+
EmojiPlugin
|
|
275
|
+
]
|
|
276
|
+
|
|
277
|
+
const markdownItPlugins = [
|
|
278
|
+
{ plugin: AlertPlugin },
|
|
279
|
+
{ plugin: katexPlugin }
|
|
280
|
+
]
|
|
281
|
+
</script>
|
|
282
|
+
|
|
283
|
+
<template>
|
|
284
|
+
<MdRenderer
|
|
285
|
+
:md="markdown"
|
|
286
|
+
:customPlugins="customPlugins"
|
|
287
|
+
:markdownItPlugins="markdownItPlugins"
|
|
288
|
+
/>
|
|
289
|
+
</template>
|
|
290
|
+
```
|
|
119
291
|
|
|
120
|
-
|
|
121
|
-
import { AlertPlugin, EmojiPlugin } from 'mio-previewer'
|
|
292
|
+
### 创建自定义插件
|
|
122
293
|
|
|
123
|
-
|
|
124
|
-
const customPlugins = [AlertPlugin, EmojiPlugin]
|
|
294
|
+
#### 自定义渲染插件
|
|
125
295
|
|
|
126
|
-
|
|
127
|
-
const
|
|
128
|
-
name: '
|
|
129
|
-
priority: 50,
|
|
130
|
-
test: (node) =>
|
|
296
|
+
```javascript
|
|
297
|
+
const HighlightPlugin = {
|
|
298
|
+
name: 'highlight',
|
|
299
|
+
priority: 50,
|
|
300
|
+
test: (node) => {
|
|
301
|
+
return node.type === 'tag' &&
|
|
302
|
+
node.name === 'mark'
|
|
303
|
+
},
|
|
131
304
|
render: (node, renderChildren, h) => {
|
|
132
|
-
return h('
|
|
305
|
+
return h('mark', {
|
|
306
|
+
style: {
|
|
307
|
+
backgroundColor: '#ffeb3b',
|
|
308
|
+
padding: '2px 4px',
|
|
309
|
+
borderRadius: '2px'
|
|
310
|
+
}
|
|
311
|
+
}, renderChildren())
|
|
133
312
|
}
|
|
134
313
|
}
|
|
135
314
|
|
|
136
|
-
|
|
315
|
+
// 使用插件
|
|
316
|
+
const customPlugins = [HighlightPlugin]
|
|
137
317
|
```
|
|
138
318
|
|
|
139
|
-
|
|
319
|
+
#### 自定义 Markdown-it 插件
|
|
320
|
+
|
|
321
|
+
```javascript
|
|
322
|
+
function customContainerPlugin(md) {
|
|
323
|
+
md.use(require('markdown-it-container'), 'note', {
|
|
324
|
+
render: (tokens, idx) => {
|
|
325
|
+
if (tokens[idx].nesting === 1) {
|
|
326
|
+
return '<div class="note">\n'
|
|
327
|
+
} else {
|
|
328
|
+
return '</div>\n'
|
|
329
|
+
}
|
|
330
|
+
}
|
|
331
|
+
})
|
|
332
|
+
}
|
|
140
333
|
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
- **mermaidPlugin**:使用 Mermaid 渲染图表(流程图、时序图、状态图、类图等),支持深色/浅色主题
|
|
334
|
+
const markdownItPlugins = [
|
|
335
|
+
{ plugin: customContainerPlugin }
|
|
336
|
+
]
|
|
337
|
+
```
|
|
146
338
|
|
|
147
|
-
|
|
339
|
+
## API 参考
|
|
340
|
+
|
|
341
|
+
### MdRenderer 属性
|
|
342
|
+
|
|
343
|
+
| 属性 | 类型 | 默认值 | 说明 |
|
|
344
|
+
|------|------|--------|------|
|
|
345
|
+
| \`md\` | \`string\` | \`''\` | 要渲染的 Markdown 内容 |
|
|
346
|
+
| \`isStreaming\` | \`boolean\` | \`false\` | 流式模式时显示光标 |
|
|
347
|
+
| \`useWorker\` | \`boolean\` | \`false\` | 使用 Web Worker 解析 |
|
|
348
|
+
| \`customPlugins\` | \`CustomPlugin[]\` | \`[]\` | 自定义渲染插件 |
|
|
349
|
+
| \`markdownItPlugins\` | \`MarkdownItPluginConfig[]\` | \`[]\` | Markdown-it 插件 |
|
|
350
|
+
| \`markdownItOptions\` | \`object\` | \`{}\` | Markdown-it 配置选项 |
|
|
351
|
+
|
|
352
|
+
### 插件类型
|
|
353
|
+
|
|
354
|
+
#### CustomPlugin
|
|
355
|
+
|
|
356
|
+
```typescript
|
|
357
|
+
interface CustomPlugin {
|
|
358
|
+
name?: string
|
|
359
|
+
priority?: number // 数字越大优先级越高
|
|
360
|
+
test: (node: ASTNode) => boolean
|
|
361
|
+
render: (
|
|
362
|
+
node: ASTNode,
|
|
363
|
+
renderChildren: () => VNode[],
|
|
364
|
+
h: typeof import('vue').h
|
|
365
|
+
) => VNode | string | null
|
|
366
|
+
}
|
|
367
|
+
```
|
|
148
368
|
|
|
149
|
-
|
|
369
|
+
#### MarkdownItPluginConfig
|
|
150
370
|
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
371
|
+
```typescript
|
|
372
|
+
interface MarkdownItPluginConfig {
|
|
373
|
+
plugin: (md: MarkdownIt, options?: any) => void
|
|
374
|
+
options?: any
|
|
375
|
+
}
|
|
376
|
+
```
|
|
156
377
|
|
|
157
|
-
|
|
378
|
+
## 内置插件
|
|
158
379
|
|
|
159
|
-
|
|
380
|
+
### Markdown-it 插件(语法)
|
|
160
381
|
|
|
161
|
-
|
|
382
|
+
| 插件 | 导入路径 | 说明 |
|
|
383
|
+
|------|----------|------|
|
|
384
|
+
| \`AlertPlugin\` | \`mio-previewer/plugins/markdown-it\` | 警告框(info、warning、error、success)|
|
|
385
|
+
| \`katexPlugin\` | \`mio-previewer/plugins/markdown-it\` | KaTeX 数学公式 |
|
|
162
386
|
|
|
163
|
-
|
|
164
|
-
```bash
|
|
165
|
-
pnpm dev
|
|
166
|
-
# 打开 http://localhost:5173/plugin-demo.html
|
|
167
|
-
```
|
|
387
|
+
### 自定义插件(渲染)
|
|
168
388
|
|
|
169
|
-
|
|
389
|
+
| 插件 | 导入路径 | 说明 |
|
|
390
|
+
|------|----------|------|
|
|
391
|
+
| \`mermaidPlugin\` | \`mio-previewer/plugins/custom\` | Mermaid 图表渲染 |
|
|
392
|
+
| \`CodeBlockPlugin\` | \`mio-previewer/plugins/custom\` | Prism 语法高亮 |
|
|
393
|
+
| \`EmojiPlugin\` | \`mio-previewer/plugins/custom\` | Emoji 代码替换 |
|
|
170
394
|
|
|
171
|
-
|
|
395
|
+
## 高级用法
|
|
172
396
|
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
397
|
+
### Markdown-it 配置
|
|
398
|
+
|
|
399
|
+
```vue
|
|
400
|
+
<script setup>
|
|
401
|
+
const markdownItOptions = {
|
|
402
|
+
html: true, // 启用 HTML 标签
|
|
403
|
+
linkify: true, // 自动转换 URL
|
|
404
|
+
typographer: true, // 智能引号、破折号
|
|
405
|
+
breaks: false // 将 \n 转换为 <br>
|
|
406
|
+
}
|
|
407
|
+
</script>
|
|
408
|
+
|
|
409
|
+
<template>
|
|
410
|
+
<MdRenderer
|
|
411
|
+
:md="markdown"
|
|
412
|
+
:markdownItOptions="markdownItOptions"
|
|
413
|
+
/>
|
|
414
|
+
</template>
|
|
177
415
|
```
|
|
178
416
|
|
|
179
|
-
|
|
417
|
+
### Web Worker 模式
|
|
180
418
|
|
|
181
|
-
|
|
419
|
+
处理大文档时获得更好的性能:
|
|
182
420
|
|
|
183
|
-
|
|
421
|
+
```vue
|
|
422
|
+
<template>
|
|
423
|
+
<MdRenderer
|
|
424
|
+
:md="largeMarkdown"
|
|
425
|
+
:useWorker="true"
|
|
426
|
+
/>
|
|
427
|
+
</template>
|
|
428
|
+
```
|
|
429
|
+
|
|
430
|
+
**注意:** Worker 模式需要 \`public/parser.worker.js\` 文件可访问。
|
|
431
|
+
|
|
432
|
+
## 开发
|
|
184
433
|
|
|
185
434
|
```bash
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
```
|
|
435
|
+
# 安装依赖
|
|
436
|
+
pnpm install
|
|
189
437
|
|
|
190
|
-
|
|
438
|
+
# 启动开发服务器
|
|
439
|
+
pnpm dev
|
|
191
440
|
|
|
192
|
-
|
|
441
|
+
# 构建库
|
|
442
|
+
pnpm build
|
|
193
443
|
|
|
194
|
-
|
|
195
|
-
|
|
444
|
+
# 运行基准测试
|
|
445
|
+
pnpm benchmark
|
|
446
|
+
```
|
|
196
447
|
|
|
197
|
-
##
|
|
448
|
+
## 项目结构
|
|
198
449
|
|
|
199
|
-
|
|
200
|
-
-
|
|
201
|
-
|
|
202
|
-
|
|
450
|
+
```
|
|
451
|
+
mio-previewer/
|
|
452
|
+
├── src/
|
|
453
|
+
│ ├── MdRenderer.vue # 主渲染器组件
|
|
454
|
+
│ ├── components/
|
|
455
|
+
│ │ ├── RecursiveRenderer.vue # AST 到 VNode 渲染器
|
|
456
|
+
│ │ ├── BlinkingCursor.vue # 流式光标
|
|
457
|
+
│ │ └── CodeBlock.vue # 代码高亮
|
|
458
|
+
│ ├── plugins/
|
|
459
|
+
│ │ ├── AlertPlugin.ts # 警告框
|
|
460
|
+
│ │ ├── katexPlugin.ts # 数学公式
|
|
461
|
+
│ │ ├── mermaidPlugin.ts # 图表
|
|
462
|
+
│ │ ├── CodeBlockPlugin.ts # 语法高亮
|
|
463
|
+
│ │ └── EmojiPlugin.ts # Emoji 支持
|
|
464
|
+
│ └── index.ts # 库入口
|
|
465
|
+
├── public/
|
|
466
|
+
│ └── parser.worker.js # 可选 Web Worker
|
|
467
|
+
└── docs/ # 文档
|
|
468
|
+
```
|
|
203
469
|
|
|
204
|
-
##
|
|
470
|
+
## 浏览器支持
|
|
471
|
+
|
|
472
|
+
- Chrome/Edge:最新 2 个版本
|
|
473
|
+
- Firefox:最新 2 个版本
|
|
474
|
+
- Safari:最新 2 个版本
|
|
475
|
+
|
|
476
|
+
## 许可证
|
|
205
477
|
|
|
206
478
|
MIT
|
|
479
|
+
|
|
480
|
+
## 相关链接
|
|
481
|
+
|
|
482
|
+
- [GitHub 仓库](https://github.com/Pretend-to/mio-previewer)
|
|
483
|
+
- [npm 包](https://www.npmjs.com/package/mio-previewer)
|
|
484
|
+
- [插件指南](./docs/PLUGIN_GUIDE.md)
|
|
485
|
+
- [更新日志](./CHANGELOG.md)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";const u=require("./_baseUniq-
|
|
1
|
+
"use strict";const u=require("./_baseUniq-DzAGUMoa.cjs"),d=require("./custom-BB9B2BL2.cjs");var P=/\s/;function p(n){for(var t=n.length;t--&&P.test(n.charAt(t)););return t}var w=/^\s+/;function A(n){return n&&n.slice(0,p(n)+1).replace(w,"")}var I=NaN,_=/^[-+]0x[0-9a-f]+$/i,y=/^0b[01]+$/i,E=/^0o[0-7]+$/i,F=parseInt;function M(n){if(typeof n=="number")return n;if(u.isSymbol(n))return I;if(d.isObject(n)){var t=typeof n.valueOf=="function"?n.valueOf():n;n=d.isObject(t)?t+"":t}if(typeof n!="string")return n===0?n:+n;n=A(n);var r=y.test(n);return r||E.test(n)?F(n.slice(2),r?2:8):_.test(n)?I:+n}var m=1/0,N=17976931348623157e292;function o(n){if(!n)return n===0?n:0;if(n=M(n),n===m||n===-m){var t=n<0?-1:1;return t*N}return n===n?n:0}function v(n){var t=o(n),r=t%1;return t===t?r?t-r:t:0}function B(n){var t=n==null?0:n.length;return t?u.baseFlatten(n):[]}var l=Object.prototype,$=l.hasOwnProperty,q=d.baseRest(function(n,t){n=Object(n);var r=-1,a=t.length,e=a>2?t[2]:void 0;for(e&&d.isIterateeCall(t[0],t[1],e)&&(a=1);++r<a;)for(var f=t[r],i=d.keysIn(f),s=-1,h=i.length;++s<h;){var b=i[s],g=n[b];(g===void 0||d.eq(g,l[b])&&!$.call(n,b))&&(n[b]=f[b])}return n});function L(n){var t=n==null?0:n.length;return t?n[t-1]:void 0}function S(n){return function(t,r,a){var e=Object(t);if(!d.isArrayLike(t)){var f=u.baseIteratee(r);t=u.keys(t),r=function(s){return f(e[s],s,e)}}var i=n(t,r,a);return i>-1?e[f?t[i]:i]:void 0}}var T=Math.max;function G(n,t,r){var a=n==null?0:n.length;if(!a)return-1;var e=r==null?0:v(r);return e<0&&(e=T(a+e,0)),u.baseFindIndex(n,u.baseIteratee(t),e)}var H=S(G);function x(n,t){var r=-1,a=d.isArrayLike(n)?Array(n.length):[];return u.baseEach(n,function(e,f,i){a[++r]=t(e,f,i)}),a}function R(n,t){var r=d.isArray(n)?u.arrayMap:x;return r(n,u.baseIteratee(t))}var z=Object.prototype,C=z.hasOwnProperty;function K(n,t){return n!=null&&C.call(n,t)}function U(n,t){return n!=null&&u.hasPath(n,t,K)}function O(n,t){return n<t}function c(n,t,r){for(var a=-1,e=n.length;++a<e;){var f=n[a],i=t(f);if(i!=null&&(s===void 0?i===i&&!u.isSymbol(i):r(i,s)))var s=i,h=f}return h}function W(n){return n&&n.length?c(n,d.identity,O):void 0}function X(n,t,r,a){if(!d.isObject(n))return n;t=u.castPath(t,n);for(var e=-1,f=t.length,i=f-1,s=n;s!=null&&++e<f;){var h=u.toKey(t[e]),b=r;if(h==="__proto__"||h==="constructor"||h==="prototype")return n;if(e!=i){var g=s[h];b=void 0,b===void 0&&(b=d.isObject(g)?g:d.isIndex(t[e+1])?[]:{})}d.assignValue(s,h,b),s=s[h]}return n}function Y(n,t,r){for(var a=-1,e=t.length,f={};++a<e;){var i=t[a],s=u.baseGet(n,i);r(s,i)&&X(f,u.castPath(i,n),s)}return f}exports.baseExtremum=c;exports.baseLt=O;exports.baseMap=x;exports.basePickBy=Y;exports.defaults=q;exports.find=H;exports.flatten=B;exports.has=U;exports.last=L;exports.map=R;exports.min=W;exports.toFinite=o;exports.toInteger=v;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { e as x, c as O, g as m, k as P, h as p, j as w, l as A, m as c, n as I, t as N, o as E } from "./_baseUniq-
|
|
2
|
-
import { aR as g, aA as F, aS as M, aT as T, aU as _, aV as l, aW as $, aX as B, aY as S, aZ as y } from "./custom-
|
|
1
|
+
import { e as x, c as O, g as m, k as P, h as p, j as w, l as A, m as c, n as I, t as N, o as E } from "./_baseUniq-BnywwJBY.js";
|
|
2
|
+
import { aR as g, aA as F, aS as M, aT as T, aU as _, aV as l, aW as $, aX as B, aY as S, aZ as y } from "./custom-C1QhDj-y.js";
|
|
3
3
|
var R = /\s/;
|
|
4
4
|
function G(n) {
|
|
5
5
|
for (var r = n.length; r-- && R.test(n.charAt(r)); )
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { be as S, bf as Rn, aW as T, bg as w, bh as xn, bi as mn, aV as sn, bj as Mn, bk as un, bl as x, aT as U, bm as Cn, bn as on, bo as Fn, bp as E, bc as gn, bq as R, aR as ln, br as Dn, bs as D, bt as Gn, bu as Un, bv as _, aZ as Bn, bw as Nn, aU as Kn, bx as X, by as jn, bz as Hn, aY as qn, aX as cn, ba as Yn, bA as M } from "./custom-
|
|
1
|
+
import { be as S, bf as Rn, aW as T, bg as w, bh as xn, bi as mn, aV as sn, bj as Mn, bk as un, bl as x, aT as U, bm as Cn, bn as on, bo as Fn, bp as E, bc as gn, bq as R, aR as ln, br as Dn, bs as D, bt as Gn, bu as Un, bv as _, aZ as Bn, bw as Nn, aU as Kn, bx as X, by as jn, bz as Hn, aY as qn, aX as cn, ba as Yn, bA as M } from "./custom-C1QhDj-y.js";
|
|
2
2
|
var Zn = "[object Symbol]";
|
|
3
3
|
function B(n) {
|
|
4
4
|
return typeof n == "symbol" || S(n) && Rn(n) == Zn;
|