@zjlab-frontier/markdown 1.0.12 → 1.0.14

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.
Files changed (44) hide show
  1. package/README.md +294 -294
  2. package/dist/{arc-B6p_o37u.mjs → arc-D74rvo4b.mjs} +1 -1
  3. package/dist/{blockDiagram-c4efeb88-C_E51zlP.mjs → blockDiagram-c4efeb88-Dq7cH4-h.mjs} +5 -5
  4. package/dist/{c4Diagram-c83219d4-DVehU2Mj.mjs → c4Diagram-c83219d4-rKujGWJu.mjs} +2 -2
  5. package/dist/{channel-CAcOWanE.mjs → channel-ByGwozWG.mjs} +1 -1
  6. package/dist/{classDiagram-beda092f-BqYp3hBm.mjs → classDiagram-beda092f-lWZwcYV6.mjs} +5 -5
  7. package/dist/{classDiagram-v2-2358418a-CRQtUpfx.mjs → classDiagram-v2-2358418a-C4sFzZRo.mjs} +5 -5
  8. package/dist/{clone-BXStUd6l.mjs → clone-Cu-z2qEZ.mjs} +1 -1
  9. package/dist/{createText-1719965b-B5ahXILV.mjs → createText-1719965b-C8C_AiV9.mjs} +1 -1
  10. package/dist/{edges-96097737-pLtwGj1l.mjs → edges-96097737-CSa6AcvQ.mjs} +3 -3
  11. package/dist/{erDiagram-0228fc6a-BucZ1Nvb.mjs → erDiagram-0228fc6a-BrDm1YbM.mjs} +4 -4
  12. package/dist/{flowDb-c6c81e3f-CpahBPs0.mjs → flowDb-c6c81e3f-p6O85mPR.mjs} +1 -1
  13. package/dist/{flowDiagram-50d868cf-LjkuRs6F.mjs → flowDiagram-50d868cf-6BuZK6DY.mjs} +6 -6
  14. package/dist/{flowDiagram-v2-4f6560a1-C1mAu3WJ.mjs → flowDiagram-v2-4f6560a1-D3gkDx9X.mjs} +5 -5
  15. package/dist/{flowchart-elk-definition-6af322e1-Dc-h0S_f.mjs → flowchart-elk-definition-6af322e1-M_LSSbEb.mjs} +4 -4
  16. package/dist/{ganttDiagram-a2739b55-BaV1EbSI.mjs → ganttDiagram-a2739b55-BOrLmRWO.mjs} +2 -2
  17. package/dist/{gitGraphDiagram-82fe8481-Caj4jjYu.mjs → gitGraphDiagram-82fe8481-CGMhtWIc.mjs} +1 -1
  18. package/dist/{graph-C5jKgOTg.mjs → graph-BZTHejFm.mjs} +1 -1
  19. package/dist/{index-5325376f-lwL5sbLQ.mjs → index-5325376f-Caps-LFi.mjs} +6 -6
  20. package/dist/{index-tisKDvAf.mjs → index-DnbbJheA.mjs} +986 -995
  21. package/dist/index.mjs +1 -1
  22. package/dist/index.umd.js +93 -93
  23. package/dist/{infoDiagram-8eee0895-F9orHe8Z.mjs → infoDiagram-8eee0895-uRqxKwJ6.mjs} +1 -1
  24. package/dist/{journeyDiagram-c64418c1-ybnDin7W.mjs → journeyDiagram-c64418c1-dz1DzFDU.mjs} +3 -3
  25. package/dist/{layout-BynN_Pxg.mjs → layout-CXru9QXT.mjs} +2 -2
  26. package/dist/{line-DuwE90PV.mjs → line-Bm5Ssnau.mjs} +1 -1
  27. package/dist/{linear-Bpmjim2G.mjs → linear-DAQRF7QX.mjs} +1 -1
  28. package/dist/{mindmap-definition-8da855dc-C-U0CBIq.mjs → mindmap-definition-8da855dc-CTdmDCDH.mjs} +2 -2
  29. package/dist/{pieDiagram-a8764435-DsKr6Iq7.mjs → pieDiagram-a8764435-CDtnM831.mjs} +2 -2
  30. package/dist/{quadrantDiagram-1e28029f-BRReGZjO.mjs → quadrantDiagram-1e28029f-DDjT5NBy.mjs} +2 -2
  31. package/dist/{requirementDiagram-08caed73-BvU3pZPX.mjs → requirementDiagram-08caed73-PraMBCZ7.mjs} +4 -4
  32. package/dist/{sankeyDiagram-a04cb91d-BlcRZyJF.mjs → sankeyDiagram-a04cb91d-QCCsmW9y.mjs} +1 -1
  33. package/dist/{sequenceDiagram-c5b8d532-CG93m_H_.mjs → sequenceDiagram-c5b8d532-D-C3VnuY.mjs} +2 -2
  34. package/dist/{stateDiagram-1ecb1508-PFcynCVO.mjs → stateDiagram-1ecb1508-BDaNxlCv.mjs} +5 -5
  35. package/dist/{stateDiagram-v2-c2b004d7-BxRiCG1R.mjs → stateDiagram-v2-c2b004d7-JryFObIe.mjs} +5 -5
  36. package/dist/styles/highlight.scss +107 -107
  37. package/dist/styles/markdown.scss +1168 -1168
  38. package/dist/{styles-b4e223ce-DuofyJ6j.mjs → styles-b4e223ce-BmJy5Vur.mjs} +1 -1
  39. package/dist/{styles-ca3715f6-CAHeM3ia.mjs → styles-ca3715f6-Bz2j8g36.mjs} +1 -1
  40. package/dist/{styles-d45a18b0-DmBQOA-w.mjs → styles-d45a18b0-C81A6a5s.mjs} +4 -4
  41. package/dist/{svgDrawCommon-b86b1483-F9W_upMm.mjs → svgDrawCommon-b86b1483-BBNzCTiF.mjs} +1 -1
  42. package/dist/{timeline-definition-faaaa080-nm8elTTv.mjs → timeline-definition-faaaa080-Cn9PdfeK.mjs} +2 -2
  43. package/dist/{xychartDiagram-f5964ef8-D6rY3W8Z.mjs → xychartDiagram-f5964ef8-Du7x5hcc.mjs} +4 -4
  44. package/package.json +66 -66
package/README.md CHANGED
@@ -1,295 +1,295 @@
1
- # `@zjlab-frontier/markdown` 使用说明文档
2
-
3
- > **包名**:`@zjlab-frontier/markdown`
4
- > **适用框架**:React(支持 React 16.8+、17.x、18.x)
5
- > **功能亮点**:支持 **Mermaid 图表**、**LaTeX 数学公式(KaTeX)**、**代码高亮**、**GitHub 风格 Markdown(GFM)**、**自动换行**、**代码复制**、**长代码折叠**、**媒体自动识别** 等。
6
-
7
- ---
8
-
9
- ## 📦 安装
10
-
11
- ```bash
12
- npm install @zjlab-frontier/markdown
13
- ```
14
-
15
- > ⚠️ 注意:本组件为 **React 组件**,需确保项目中已安装 React(版本 ≥16.8)。
16
-
17
- ---
18
-
19
- ## 🚀 快速开始
20
-
21
- ### 1. 引入组件与样式
22
-
23
- ```tsx
24
- import ZJMarkdown from '@zjlab-frontier/markdown';
25
- ```
26
-
27
- ### 2. 基本使用
28
-
29
- ```tsx
30
- function App() {
31
- const markdownContent = `
32
- # 欢迎使用 ZJLab Markdown
33
-
34
- 这是一个支持 **Mermaid**、**LaTeX** 和 **代码高亮** 的 React Markdown 组件。
35
-
36
- - ✅ 表格
37
- - ✅ 任务列表
38
- - ✅ 数学公式:$E = mc^2$
39
- - ✅ 代码块(带复制按钮)
40
- - ✅ 自动识别音视频链接
41
- `;
42
-
43
- return <ZJMarkdown content={markdownContent} />;
44
- }
45
- ```
46
-
47
- ---
48
-
49
- ## 测试组件
50
-
51
- 用来快速测试、布局、调试的组件,自带全面的 Markdown 测试内容
52
-
53
- ### 1. 引入组件
54
-
55
- ```tsx
56
- import { TestZJMarkdown } from '@zjlab-frontier/markdown';
57
- ```
58
-
59
- ### 2. 使用
60
-
61
- ```tsx
62
- <TestZJMarkdown />
63
- ```
64
-
65
- ---
66
-
67
- ## 🧩 功能详解
68
-
69
- ### 1. **GitHub 风格 Markdown(GFM)支持**
70
-
71
- 通过 `remark-gfm` 插件,完整支持:
72
-
73
- - 表格
74
- - 删除线 `~~text~~`
75
- - 任务列表 `- [x] done`
76
- - 自动链接(如 `https://example.com`)
77
-
78
- ✅ 示例:
79
-
80
- ```md
81
- | 语法 | 描述 |
82
- |------|------|
83
- | `**bold**` | 加粗 |
84
-
85
- - [x] 支持 GFM
86
- - [ ] 其他功能
87
- ```
88
-
89
- ---
90
-
91
- ### 2. **LaTeX 数学公式(KaTeX)**
92
-
93
- 支持两种语法:
94
-
95
- - 行内公式:`$...$` 或 `\(...\)`
96
- - 块级公式:`$$...$$` 或 `\[...\]`
97
-
98
- > ⚠️ 注意:组件内部会自动将 `\(...\)` 和 `\[...\]` 转换为 `$...$` 和 `$$...$$`,确保 KaTeX 正确渲染。
99
-
100
- ✅ 示例:
101
-
102
- ```md
103
- 爱因斯坦质能方程:$E = mc^2$
104
-
105
- 高斯积分:
106
- $$
107
- \int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
108
- $$
109
- ```
110
-
111
- > 📌 **样式说明**:已自动引入 `katex/dist/katex.min.css`,无需手动引入。
112
-
113
- ---
114
-
115
- ### 3. **Mermaid 图表渲染**
116
-
117
- 在代码块中标注语言为 `mermaid` 即可自动渲染图表:
118
-
119
- ✅ 示例:
120
-
121
- ````
122
- ```mermaid
123
- graph TD
124
- A[Start] --> B{Is it?}
125
- B -->|Yes| C[OK]
126
- B -->|No| D[Cancel]
127
- ```
128
- ````
129
-
130
- > 🔒 **安全机制**:
131
- > - 若 Mermaid 渲染失败(如语法错误),组件将 **静默失败**(不显示原始代码,避免泄露敏感内容)。
132
- > - 图表容器带有 `no-dark` 类,防止深色主题干扰 Mermaid 默认配色。
133
-
134
- > 🖱️ **交互**:点击图表可触发 `viewSvgInNewWindow()`(当前为预留功能,实际未启用弹窗,但保留点击事件扩展点)。
135
-
136
- ---
137
-
138
- ### 4. **代码高亮与增强功能**
139
-
140
- #### ✅ 支持特性:
141
-
142
- - 自动识别语言(基于 `language-xxx` class)
143
- - 显示语言标签(如 “javascript”)
144
- - 一键复制代码(右上角复制按钮)
145
- - 长代码块自动折叠(>400px 高度)
146
- - 纯文本类代码自动换行(如 `text`, `md`, `latex` 等)
147
-
148
- #### ✅ 支持自动换行的语言:
149
-
150
- ```txt
151
- "", "md", "markdown", "text", "txt", "plaintext", "tex", "latex"
152
- ```
153
-
154
- #### ✅ 复制按钮样式:
155
-
156
- - 使用 `.copy-code-button` 类,可通过 CSS 自定义图标。
157
-
158
- ---
159
-
160
- ### 5. **媒体自动识别**
161
-
162
- 组件会自动将特定后缀的链接转换为 `<audio>` 或 `<video>` 元素:
163
-
164
- #### 音频格式(自动转为 `<audio controls>`):
165
- - `.aac`, `.mp3`, `.opus`, `.wav`
166
-
167
- #### 视频格式(自动转为 `<video controls>`):
168
- - `.3gp`, `.3g2`, `.webm`, `.ogv`, `.mpeg`, `.mp4`, `.avi`
169
-
170
- ✅ 示例:
171
-
172
- ```md
173
- 听一段音乐:https://example.com/song.mp3
174
-
175
- 看一个视频:https://example.com/demo.mp4
176
- ```
177
-
178
- ---
179
-
180
- ### 6. **HTML 安全过滤(防 XSS)**
181
-
182
- 组件对输入内容进行 **双重安全处理**:
183
-
184
- 1. **转义危险字符**:`<`, `>`, `/`, `=` → 对应 HTML 实体
185
- 2. **智能跳过**:
186
- - 所有代码块(行内 `` `...` `` 和块级 ```...```)
187
- - LaTeX 公式(`$...$`, `$$...$$`)
188
-
189
- > ✅ 保证公式和代码内容不被破坏,同时防止 XSS 攻击。
190
-
191
- ---
192
-
193
- ### 7. **文本方向与段落**
194
-
195
- - 所有 `<p>` 标签自动添加 `dir="auto"`,支持多语言自动排版。
196
- - 所有换行符(单个 `\n`)自动转为 `<br>`(通过 `remark-breaks`)。
197
-
198
- ---
199
-
200
- ## 🎨 自定义样式
201
-
202
- ### 1. **全局样式类**
203
-
204
- 组件根元素自动应用:
205
-
206
- ```html
207
- <div class="markdown-body">...</div>
208
- ```
209
-
210
- > `.markdown-body` 采用 **GitHub 风格样式**(基于 `github-markdown-css` 理念定制)。
211
-
212
- ### 2. **自定义字体与字号**
213
-
214
- 通过 props 控制:
215
-
216
- ```tsx
217
- <ZJMarkdown
218
- content={content}
219
- fontSize={18} // 默认 16
220
- fontFamily="'Inter', sans-serif"
221
- />
222
- ```
223
-
224
- ### 3. **覆盖内置样式**
225
-
226
- 可通过 CSS 覆盖以下关键类:
227
-
228
- | 类名 | 用途 |
229
- |------|------|
230
- | `.markdown-body` | 整体容器 |
231
- | `.mermaid` | Mermaid 图表容器 |
232
- | `.copy-code-button` | 代码复制按钮 |
233
- | `.show-hide-button` | 代码折叠按钮 |
234
- | `.no-dark` | 防止深色主题干扰 Mermaid |
235
-
236
- ---
237
-
238
- ## 🛠️ API 说明
239
-
240
- ### `ZJMarkdown` Props
241
-
242
- | 属性 | 类型 | 默认值 | 说明 |
243
- |------|------|--------|------|
244
- | `content` | `string` | **必需** | Markdown 源字符串 |
245
- | `fontSize` | `number` | `16` | 字体大小(单位:px) |
246
- | `fontFamily` | `string` | `"inherit"` | 字体族 |
247
- | `onContextMenu` | `React.MouseEventHandler` | - | 右键菜单事件 |
248
- | `onDoubleClickCapture` | `React.MouseEventHandler` | - | 双击捕获事件 |
249
- | 其他 `div` 原生属性 | - | - | 如 `className`, `style` 等(透传至根 `div`) |
250
-
251
- > ⚠️ 注意:`content` 中的 HTML 标签会被 **安全过滤**,仅保留必要结构。
252
-
253
- ---
254
-
255
- ## 🧪 注意事项与限制
256
-
257
- 1. **Mermaid 渲染异步性**:
258
- - 首次渲染可能因 debounce 延迟(600ms)导致短暂显示原始代码。
259
- - 组件已做兼容处理,尽量减少此现象。
260
-
261
- 2. **KaTeX 公式转义**:
262
- - 不要混用 `\(...\)` 和 `$...$`,建议统一使用 `$...$`。
263
- - 公式内避免使用 `<`, `>` 等符号,或使用 `\lt`, `\gt` 替代。
264
-
265
- 3. **代码折叠逻辑**:
266
- - 仅当代码块高度 > 400px 时显示“查看全部”按钮。
267
- - 折叠状态下,代码块最大高度为 400px,`overflow-y: hidden`。
268
-
269
- 4. **性能优化**:
270
- - 内部使用 `React.memo`,仅当 `content` 变化时重渲染。
271
- - 建议对大型文档做分页或懒加载。
272
-
273
- ---
274
-
275
- ## 📜 许可证
276
-
277
- MIT License
278
-
279
- ---
280
-
281
- ## 🙏 致谢
282
-
283
- 本组件基于以下优秀开源库构建:
284
-
285
- - [`react-markdown`](https://github.com/remarkjs/react-markdown)
286
- - [`rehype-highlight`](https://github.com/rehypejs/rehype-highlight)
287
- - [`rehype-katex`](https://github.com/remarkjs/remark-math)
288
- - [`mermaid`](https://mermaid.js.org/)
289
- - [`katex`](https://katex.org/)
290
- - [`clsx`](https://github.com/lukeed/clsx)
291
- - [`use-debounce`](https://github.com/xnimorz/use-debounce)
292
-
293
- ---
294
-
1
+ # `@zjlab-frontier/markdown` 使用说明文档
2
+
3
+ > **包名**:`@zjlab-frontier/markdown`
4
+ > **适用框架**:React(支持 React 16.8+、17.x、18.x)
5
+ > **功能亮点**:支持 **Mermaid 图表**、**LaTeX 数学公式(KaTeX)**、**代码高亮**、**GitHub 风格 Markdown(GFM)**、**自动换行**、**代码复制**、**长代码折叠**、**媒体自动识别** 等。
6
+
7
+ ---
8
+
9
+ ## 📦 安装
10
+
11
+ ```bash
12
+ npm install @zjlab-frontier/markdown
13
+ ```
14
+
15
+ > ⚠️ 注意:本组件为 **React 组件**,需确保项目中已安装 React(版本 ≥16.8)。
16
+
17
+ ---
18
+
19
+ ## 🚀 快速开始
20
+
21
+ ### 1. 引入组件与样式
22
+
23
+ ```tsx
24
+ import ZJMarkdown from '@zjlab-frontier/markdown';
25
+ ```
26
+
27
+ ### 2. 基本使用
28
+
29
+ ```tsx
30
+ function App() {
31
+ const markdownContent = `
32
+ # 欢迎使用 ZJLab Markdown
33
+
34
+ 这是一个支持 **Mermaid**、**LaTeX** 和 **代码高亮** 的 React Markdown 组件。
35
+
36
+ - ✅ 表格
37
+ - ✅ 任务列表
38
+ - ✅ 数学公式:$E = mc^2$
39
+ - ✅ 代码块(带复制按钮)
40
+ - ✅ 自动识别音视频链接
41
+ `;
42
+
43
+ return <ZJMarkdown content={markdownContent} />;
44
+ }
45
+ ```
46
+
47
+ ---
48
+
49
+ ## 测试组件
50
+
51
+ 用来快速测试、布局、调试的组件,自带全面的 Markdown 测试内容
52
+
53
+ ### 1. 引入组件
54
+
55
+ ```tsx
56
+ import { TestZJMarkdown } from '@zjlab-frontier/markdown';
57
+ ```
58
+
59
+ ### 2. 使用
60
+
61
+ ```tsx
62
+ <TestZJMarkdown />
63
+ ```
64
+
65
+ ---
66
+
67
+ ## 🧩 功能详解
68
+
69
+ ### 1. **GitHub 风格 Markdown(GFM)支持**
70
+
71
+ 通过 `remark-gfm` 插件,完整支持:
72
+
73
+ - 表格
74
+ - 删除线 `~~text~~`
75
+ - 任务列表 `- [x] done`
76
+ - 自动链接(如 `https://example.com`)
77
+
78
+ ✅ 示例:
79
+
80
+ ```md
81
+ | 语法 | 描述 |
82
+ |------|------|
83
+ | `**bold**` | 加粗 |
84
+
85
+ - [x] 支持 GFM
86
+ - [ ] 其他功能
87
+ ```
88
+
89
+ ---
90
+
91
+ ### 2. **LaTeX 数学公式(KaTeX)**
92
+
93
+ 支持两种语法:
94
+
95
+ - 行内公式:`$...$` 或 `\(...\)`
96
+ - 块级公式:`$$...$$` 或 `\[...\]`
97
+
98
+ > ⚠️ 注意:组件内部会自动将 `\(...\)` 和 `\[...\]` 转换为 `$...$` 和 `$$...$$`,确保 KaTeX 正确渲染。
99
+
100
+ ✅ 示例:
101
+
102
+ ```md
103
+ 爱因斯坦质能方程:$E = mc^2$
104
+
105
+ 高斯积分:
106
+ $$
107
+ \int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
108
+ $$
109
+ ```
110
+
111
+ > 📌 **样式说明**:已自动引入 `katex/dist/katex.min.css`,无需手动引入。
112
+
113
+ ---
114
+
115
+ ### 3. **Mermaid 图表渲染**
116
+
117
+ 在代码块中标注语言为 `mermaid` 即可自动渲染图表:
118
+
119
+ ✅ 示例:
120
+
121
+ ````
122
+ ```mermaid
123
+ graph TD
124
+ A[Start] --> B{Is it?}
125
+ B -->|Yes| C[OK]
126
+ B -->|No| D[Cancel]
127
+ ```
128
+ ````
129
+
130
+ > 🔒 **安全机制**:
131
+ > - 若 Mermaid 渲染失败(如语法错误),组件将 **静默失败**(不显示原始代码,避免泄露敏感内容)。
132
+ > - 图表容器带有 `no-dark` 类,防止深色主题干扰 Mermaid 默认配色。
133
+
134
+ > 🖱️ **交互**:点击图表可触发 `viewSvgInNewWindow()`(当前为预留功能,实际未启用弹窗,但保留点击事件扩展点)。
135
+
136
+ ---
137
+
138
+ ### 4. **代码高亮与增强功能**
139
+
140
+ #### ✅ 支持特性:
141
+
142
+ - 自动识别语言(基于 `language-xxx` class)
143
+ - 显示语言标签(如 “javascript”)
144
+ - 一键复制代码(右上角复制按钮)
145
+ - 长代码块自动折叠(>400px 高度)
146
+ - 纯文本类代码自动换行(如 `text`, `md`, `latex` 等)
147
+
148
+ #### ✅ 支持自动换行的语言:
149
+
150
+ ```txt
151
+ "", "md", "markdown", "text", "txt", "plaintext", "tex", "latex"
152
+ ```
153
+
154
+ #### ✅ 复制按钮样式:
155
+
156
+ - 使用 `.copy-code-button` 类,可通过 CSS 自定义图标。
157
+
158
+ ---
159
+
160
+ ### 5. **媒体自动识别**
161
+
162
+ 组件会自动将特定后缀的链接转换为 `<audio>` 或 `<video>` 元素:
163
+
164
+ #### 音频格式(自动转为 `<audio controls>`):
165
+ - `.aac`, `.mp3`, `.opus`, `.wav`
166
+
167
+ #### 视频格式(自动转为 `<video controls>`):
168
+ - `.3gp`, `.3g2`, `.webm`, `.ogv`, `.mpeg`, `.mp4`, `.avi`
169
+
170
+ ✅ 示例:
171
+
172
+ ```md
173
+ 听一段音乐:https://example.com/song.mp3
174
+
175
+ 看一个视频:https://example.com/demo.mp4
176
+ ```
177
+
178
+ ---
179
+
180
+ ### 6. **HTML 安全过滤(防 XSS)**
181
+
182
+ 组件对输入内容进行 **双重安全处理**:
183
+
184
+ 1. **转义危险字符**:`<`, `>`, `/`, `=` → 对应 HTML 实体
185
+ 2. **智能跳过**:
186
+ - 所有代码块(行内 `` `...` `` 和块级 ```...```)
187
+ - LaTeX 公式(`$...$`, `$$...$$`)
188
+
189
+ > ✅ 保证公式和代码内容不被破坏,同时防止 XSS 攻击。
190
+
191
+ ---
192
+
193
+ ### 7. **文本方向与段落**
194
+
195
+ - 所有 `<p>` 标签自动添加 `dir="auto"`,支持多语言自动排版。
196
+ - 所有换行符(单个 `\n`)自动转为 `<br>`(通过 `remark-breaks`)。
197
+
198
+ ---
199
+
200
+ ## 🎨 自定义样式
201
+
202
+ ### 1. **全局样式类**
203
+
204
+ 组件根元素自动应用:
205
+
206
+ ```html
207
+ <div class="markdown-body">...</div>
208
+ ```
209
+
210
+ > `.markdown-body` 采用 **GitHub 风格样式**(基于 `github-markdown-css` 理念定制)。
211
+
212
+ ### 2. **自定义字体与字号**
213
+
214
+ 通过 props 控制:
215
+
216
+ ```tsx
217
+ <ZJMarkdown
218
+ content={content}
219
+ fontSize={18} // 默认 16
220
+ fontFamily="'Inter', sans-serif"
221
+ />
222
+ ```
223
+
224
+ ### 3. **覆盖内置样式**
225
+
226
+ 可通过 CSS 覆盖以下关键类:
227
+
228
+ | 类名 | 用途 |
229
+ |------|------|
230
+ | `.markdown-body` | 整体容器 |
231
+ | `.mermaid` | Mermaid 图表容器 |
232
+ | `.copy-code-button` | 代码复制按钮 |
233
+ | `.show-hide-button` | 代码折叠按钮 |
234
+ | `.no-dark` | 防止深色主题干扰 Mermaid |
235
+
236
+ ---
237
+
238
+ ## 🛠️ API 说明
239
+
240
+ ### `ZJMarkdown` Props
241
+
242
+ | 属性 | 类型 | 默认值 | 说明 |
243
+ |------|------|--------|------|
244
+ | `content` | `string` | **必需** | Markdown 源字符串 |
245
+ | `fontSize` | `number` | `16` | 字体大小(单位:px) |
246
+ | `fontFamily` | `string` | `"inherit"` | 字体族 |
247
+ | `onContextMenu` | `React.MouseEventHandler` | - | 右键菜单事件 |
248
+ | `onDoubleClickCapture` | `React.MouseEventHandler` | - | 双击捕获事件 |
249
+ | 其他 `div` 原生属性 | - | - | 如 `className`, `style` 等(透传至根 `div`) |
250
+
251
+ > ⚠️ 注意:`content` 中的 HTML 标签会被 **安全过滤**,仅保留必要结构。
252
+
253
+ ---
254
+
255
+ ## 🧪 注意事项与限制
256
+
257
+ 1. **Mermaid 渲染异步性**:
258
+ - 首次渲染可能因 debounce 延迟(600ms)导致短暂显示原始代码。
259
+ - 组件已做兼容处理,尽量减少此现象。
260
+
261
+ 2. **KaTeX 公式转义**:
262
+ - 不要混用 `\(...\)` 和 `$...$`,建议统一使用 `$...$`。
263
+ - 公式内避免使用 `<`, `>` 等符号,或使用 `\lt`, `\gt` 替代。
264
+
265
+ 3. **代码折叠逻辑**:
266
+ - 仅当代码块高度 > 400px 时显示“查看全部”按钮。
267
+ - 折叠状态下,代码块最大高度为 400px,`overflow-y: hidden`。
268
+
269
+ 4. **性能优化**:
270
+ - 内部使用 `React.memo`,仅当 `content` 变化时重渲染。
271
+ - 建议对大型文档做分页或懒加载。
272
+
273
+ ---
274
+
275
+ ## 📜 许可证
276
+
277
+ MIT License
278
+
279
+ ---
280
+
281
+ ## 🙏 致谢
282
+
283
+ 本组件基于以下优秀开源库构建:
284
+
285
+ - [`react-markdown`](https://github.com/remarkjs/react-markdown)
286
+ - [`rehype-highlight`](https://github.com/rehypejs/rehype-highlight)
287
+ - [`rehype-katex`](https://github.com/remarkjs/remark-math)
288
+ - [`mermaid`](https://mermaid.js.org/)
289
+ - [`katex`](https://katex.org/)
290
+ - [`clsx`](https://github.com/lukeed/clsx)
291
+ - [`use-debounce`](https://github.com/xnimorz/use-debounce)
292
+
293
+ ---
294
+
295
295
  > ✅ 本说明文档完整覆盖 `@zjlab-frontier/markdown@1.0.6` 所有功能,无省略,可直接用于团队协作或用户文档。
@@ -1,5 +1,5 @@
1
1
  import { w as ln, c as I } from "./path-DLwuMfdd.mjs";
2
- import { av as an, aw as j, ax as D, ay as rn, az as y, U as on, aA as K, aB as _, aC as un, aD as t, aE as sn, aF as tn, aG as fn } from "./index-tisKDvAf.mjs";
2
+ import { av as an, aw as j, ax as D, ay as rn, az as y, U as on, aA as K, aB as _, aC as un, aD as t, aE as sn, aF as tn, aG as fn } from "./index-DnbbJheA.mjs";
3
3
  function cn(l) {
4
4
  return l.innerRadius;
5
5
  }
@@ -1,8 +1,8 @@
1
- import { Z as se, A as ye, d as H, e as Ee, l as S, E as we, k as De, g as he, p as ve } from "./index-tisKDvAf.mjs";
2
- import { c as Ne } from "./clone-BXStUd6l.mjs";
3
- import { i as ke, c as Ie, b as Oe, d as Te, a as ge, p as ze } from "./edges-96097737-pLtwGj1l.mjs";
4
- import { G as Ce } from "./graph-C5jKgOTg.mjs";
5
- import { c as Ae } from "./channel-CAcOWanE.mjs";
1
+ import { Z as se, A as ye, d as H, e as Ee, l as S, E as we, k as De, g as he, p as ve } from "./index-DnbbJheA.mjs";
2
+ import { c as Ne } from "./clone-Cu-z2qEZ.mjs";
3
+ import { i as ke, c as Ie, b as Oe, d as Te, a as ge, p as ze } from "./edges-96097737-CSa6AcvQ.mjs";
4
+ import { G as Ce } from "./graph-BZTHejFm.mjs";
5
+ import { c as Ae } from "./channel-ByGwozWG.mjs";
6
6
  import { o as Re } from "./ordinal-C0oynhte.mjs";
7
7
  import { s as Be } from "./Tableau10-D7jGxypv.mjs";
8
8
  var le, oe, ee = (function() {
@@ -1,5 +1,5 @@
1
- import { g as Dt, s as we, a as Oe, b as Te, c as Re, d as Nt, l as le, e as De, f as Se, h as wt, i as ue, j as Pe, w as Me, k as Kt, m as oe } from "./index-tisKDvAf.mjs";
2
- import { d as Le, g as Ne } from "./svgDrawCommon-b86b1483-F9W_upMm.mjs";
1
+ import { g as Dt, s as we, a as Oe, b as Te, c as Re, d as Nt, l as le, e as De, f as Se, h as wt, i as ue, j as Pe, w as Me, k as Kt, m as oe } from "./index-DnbbJheA.mjs";
2
+ import { d as Le, g as Ne } from "./svgDrawCommon-b86b1483-BBNzCTiF.mjs";
3
3
  var Yt = (function() {
4
4
  var e = function(bt, _, x, m) {
5
5
  for (x = x || {}, m = bt.length; m--; x[bt[m]] = _)
@@ -1,4 +1,4 @@
1
- import { aH as o, aI as n } from "./index-tisKDvAf.mjs";
1
+ import { aH as o, aI as n } from "./index-DnbbJheA.mjs";
2
2
  const t = (a, r) => o.lang.round(n.parse(a)[r]);
3
3
  export {
4
4
  t as c
@@ -1,8 +1,8 @@
1
- import { s as G, d as S, p as A } from "./styles-b4e223ce-DuofyJ6j.mjs";
2
- import { g as v, l as y, d as B, e as W, F as $, B as M, G as I } from "./index-tisKDvAf.mjs";
3
- import { G as O } from "./graph-C5jKgOTg.mjs";
4
- import { l as P } from "./layout-BynN_Pxg.mjs";
5
- import { l as X } from "./line-DuwE90PV.mjs";
1
+ import { s as G, d as S, p as A } from "./styles-b4e223ce-BmJy5Vur.mjs";
2
+ import { g as v, l as y, d as B, e as W, F as $, B as M, G as I } from "./index-DnbbJheA.mjs";
3
+ import { G as O } from "./graph-BZTHejFm.mjs";
4
+ import { l as P } from "./layout-CXru9QXT.mjs";
5
+ import { l as X } from "./line-Bm5Ssnau.mjs";
6
6
  let H = 0;
7
7
  const Y = function(i, a, t, o, p) {
8
8
  const g = function(e) {
@@ -1,8 +1,8 @@
1
- import { s as M, d as _, p as B } from "./styles-b4e223ce-DuofyJ6j.mjs";
2
- import { l as d, g as c, d as w, B as R, o as G, k as D, p as E, q as C, n as A } from "./index-tisKDvAf.mjs";
3
- import { G as q } from "./graph-C5jKgOTg.mjs";
4
- import { r as z } from "./index-5325376f-lwL5sbLQ.mjs";
5
- import "./layout-BynN_Pxg.mjs";
1
+ import { s as M, d as _, p as B } from "./styles-b4e223ce-BmJy5Vur.mjs";
2
+ import { l as d, g as c, d as w, B as R, o as G, k as D, p as E, q as C, n as A } from "./index-DnbbJheA.mjs";
3
+ import { G as q } from "./graph-BZTHejFm.mjs";
4
+ import { r as z } from "./index-5325376f-Caps-LFi.mjs";
5
+ import "./layout-CXru9QXT.mjs";
6
6
  const S = (s) => D.sanitizeText(s, c());
7
7
  let k = {
8
8
  dividerMargin: 10,
@@ -1,4 +1,4 @@
1
- import { c as r } from "./graph-C5jKgOTg.mjs";
1
+ import { c as r } from "./graph-BZTHejFm.mjs";
2
2
  var e = 4;
3
3
  function a(o) {
4
4
  return r(o, e);
@@ -1,4 +1,4 @@
1
- import { l as b, b6 as T, b7 as m, i as W, Z as E, b8 as w } from "./index-tisKDvAf.mjs";
1
+ import { l as b, b6 as T, b7 as m, i as W, Z as E, b8 as w } from "./index-DnbbJheA.mjs";
2
2
  function S(n) {
3
3
  const t = n.replace(/\n{2,}/g, `
4
4
  `);