@zjlab-frontier/markdown 1.0.4
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 +148 -0
- package/dist/Tableau10-D7jGxypv.mjs +8 -0
- package/dist/arc-BkFOiLi7.mjs +84 -0
- package/dist/array-CqVTtuYm.mjs +6 -0
- package/dist/blockDiagram-c4efeb88-CngVNufX.mjs +1221 -0
- package/dist/c4Diagram-c83219d4-CvSWXhSV.mjs +1579 -0
- package/dist/channel-BCTzeqLo.mjs +5 -0
- package/dist/classDiagram-beda092f-8UkpWDgI.mjs +218 -0
- package/dist/classDiagram-v2-2358418a-D3LsBhTm.mjs +200 -0
- package/dist/clone-DZgGXtyK.mjs +8 -0
- package/dist/createText-1719965b-DMv-Bu7A.mjs +155 -0
- package/dist/edges-96097737-BeVwLt3S.mjs +1088 -0
- package/dist/erDiagram-0228fc6a-GXXkRZ8r.mjs +929 -0
- package/dist/flowDb-c6c81e3f-CrOg5i55.mjs +1126 -0
- package/dist/flowDiagram-50d868cf-sXe_oFAW.mjs +788 -0
- package/dist/flowDiagram-v2-4f6560a1-CoKYvZkH.mjs +17 -0
- package/dist/flowchart-elk-definition-6af322e1-SuvGsuBl.mjs +48146 -0
- package/dist/ganttDiagram-a2739b55-BbWq9bqY.mjs +2477 -0
- package/dist/gitGraphDiagram-82fe8481-C6-e4UmK.mjs +1264 -0
- package/dist/graph-CoIGCRFf.mjs +847 -0
- package/dist/index-5325376f-BENBY8aO.mjs +373 -0
- package/dist/index-5_ujiRGo.mjs +46276 -0
- package/dist/index.css +1 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.mjs +8 -0
- package/dist/index.umd.js +2421 -0
- package/dist/infoDiagram-8eee0895-BEAb2pCD.mjs +319 -0
- package/dist/init-DjUOC4st.mjs +16 -0
- package/dist/journeyDiagram-c64418c1-CERjyYnA.mjs +801 -0
- package/dist/layout-aCAVHR2T.mjs +1472 -0
- package/dist/line-BGunMwE-.mjs +33 -0
- package/dist/linear-DciWi0hE.mjs +423 -0
- package/dist/markdown.d.ts +25 -0
- package/dist/mindmap-definition-8da855dc-Cc8_U7zD.mjs +21936 -0
- package/dist/ordinal-C0oynhte.mjs +61 -0
- package/dist/path-DLwuMfdd.mjs +84 -0
- package/dist/pieDiagram-a8764435-B00hy7Ez.mjs +500 -0
- package/dist/quadrantDiagram-1e28029f-DR7IGAoM.mjs +903 -0
- package/dist/requirementDiagram-08caed73-o6N3X3-m.mjs +767 -0
- package/dist/sankeyDiagram-a04cb91d-CYF9Ro1W.mjs +802 -0
- package/dist/sequenceDiagram-c5b8d532-vz_R7xBU.mjs +2234 -0
- package/dist/stateDiagram-1ecb1508-B0YUHnuE.mjs +266 -0
- package/dist/stateDiagram-v2-c2b004d7-CDTm1Jfb.mjs +184 -0
- package/dist/styles/highlight.scss +115 -0
- package/dist/styles/markdown.scss +1163 -0
- package/dist/styles-b4e223ce-C_-huVuQ.mjs +1089 -0
- package/dist/styles-ca3715f6-soe07Bnw.mjs +960 -0
- package/dist/styles-d45a18b0-0ZXwJp5P.mjs +436 -0
- package/dist/svgDrawCommon-b86b1483-UCLksviB.mjs +64 -0
- package/dist/timeline-definition-faaaa080-Dt5unv7p.mjs +792 -0
- package/dist/vite.config.d.ts +2 -0
- package/dist/xychartDiagram-f5964ef8-BZWS0E_9.mjs +1282 -0
- package/package.json +66 -0
package/README.md
ADDED
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
# zjlab-frontier-markdown
|
|
2
|
+
|
|
3
|
+
一个功能强大的 React Markdown 组件,支持 Mermaid 图表、KaTeX 数学公式、代码高亮等高级特性。
|
|
4
|
+
|
|
5
|
+
## 安装
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install zjlab-frontier-markdown
|
|
9
|
+
# 或
|
|
10
|
+
yarn add zjlab-frontier-markdown
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## 使用方法
|
|
14
|
+
|
|
15
|
+
```jsx
|
|
16
|
+
import React from 'react';
|
|
17
|
+
import { ZJMarkdown } from 'zjlab-frontier-markdown';
|
|
18
|
+
|
|
19
|
+
function App() {
|
|
20
|
+
const markdownContent = `
|
|
21
|
+
# Hello World
|
|
22
|
+
|
|
23
|
+
## 这是一个示例文档
|
|
24
|
+
|
|
25
|
+
### 代码高亮
|
|
26
|
+
\`\`\`javascript
|
|
27
|
+
function hello() {
|
|
28
|
+
console.log('Hello World!');
|
|
29
|
+
}
|
|
30
|
+
\`\`\`
|
|
31
|
+
|
|
32
|
+
### Mermaid 图表
|
|
33
|
+
\`\`\`mermaid
|
|
34
|
+
graph TD;
|
|
35
|
+
A-->B;
|
|
36
|
+
B-->C;
|
|
37
|
+
C-->D;
|
|
38
|
+
\`\`\`
|
|
39
|
+
|
|
40
|
+
### 数学公式
|
|
41
|
+
行内公式: $E = mc^2$
|
|
42
|
+
|
|
43
|
+
块级公式:
|
|
44
|
+
$$
|
|
45
|
+
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
|
|
46
|
+
$$
|
|
47
|
+
`;
|
|
48
|
+
|
|
49
|
+
return (
|
|
50
|
+
<div className="app">
|
|
51
|
+
<ZJMarkdown
|
|
52
|
+
content={markdownContent}
|
|
53
|
+
fontSize={16}
|
|
54
|
+
fontFamily="Arial, sans-serif"
|
|
55
|
+
/>
|
|
56
|
+
</div>
|
|
57
|
+
);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
export default App;
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
## 功能特性
|
|
64
|
+
|
|
65
|
+
- ✅ 支持标准 Markdown 语法
|
|
66
|
+
- ✅ 支持 GFM (GitHub Flavored Markdown)
|
|
67
|
+
- ✅ 代码高亮显示
|
|
68
|
+
- ✅ Mermaid 图表渲染
|
|
69
|
+
- ✅ KaTeX 数学公式支持
|
|
70
|
+
- ✅ 音频/视频嵌入
|
|
71
|
+
- ✅ 代码折叠功能
|
|
72
|
+
- ✅ 自动复制代码按钮
|
|
73
|
+
- ✅ 响应式设计
|
|
74
|
+
|
|
75
|
+
## ZJMarkdown 组件属性
|
|
76
|
+
|
|
77
|
+
| 属性 | 类型 | 默认值 | 说明 |
|
|
78
|
+
|------|------|--------|------|
|
|
79
|
+
| content | string | 必需 | Markdown 内容 |
|
|
80
|
+
| fontSize | number | 16 | 字体大小 |
|
|
81
|
+
| fontFamily | string | inherit | 字体家族 |
|
|
82
|
+
| color | string | inherit | 文字颜色 |
|
|
83
|
+
| isUser | boolean | false | 是否为用户内容 |
|
|
84
|
+
| loading | boolean | false | 加载状态 |
|
|
85
|
+
| parentRef | React.RefObject<HTMLDivElement> | undefined | 父元素引用 |
|
|
86
|
+
| defaultShow | boolean | true | 默认显示状态 |
|
|
87
|
+
| onContextMenu | (e: React.MouseEvent) => void | undefined | 右键菜单事件 |
|
|
88
|
+
| onDoubleClickCapture | (e: React.MouseEvent) => void | undefined | 双击事件捕获 |
|
|
89
|
+
|
|
90
|
+
## 支持的语法
|
|
91
|
+
|
|
92
|
+
### 代码块
|
|
93
|
+
|
|
94
|
+
使用三反引号包裹代码,并指定语言以启用语法高亮:
|
|
95
|
+
|
|
96
|
+
\`\`\`javascript
|
|
97
|
+
// JavaScript 代码
|
|
98
|
+
const greeting = 'Hello World';
|
|
99
|
+
console.log(greeting);
|
|
100
|
+
\`\`\`
|
|
101
|
+
|
|
102
|
+
### Mermaid 图表
|
|
103
|
+
|
|
104
|
+
使用语言标记 `mermaid` 来渲染 Mermaid 图表:
|
|
105
|
+
|
|
106
|
+
\`\`\`mermaid
|
|
107
|
+
graph LR;
|
|
108
|
+
A[开始] --> B[处理];
|
|
109
|
+
B --> C[结束];
|
|
110
|
+
\`\`\`
|
|
111
|
+
|
|
112
|
+
### 数学公式
|
|
113
|
+
|
|
114
|
+
使用 `$` 包裹行内公式,使用 `$$` 包裹块级公式:
|
|
115
|
+
|
|
116
|
+
行内公式: $x^2 + y^2 = z^2$
|
|
117
|
+
|
|
118
|
+
块级公式:
|
|
119
|
+
$$
|
|
120
|
+
\frac{n!}{k!(n-k)!} = \binom{n}{k}
|
|
121
|
+
$$
|
|
122
|
+
|
|
123
|
+
### 多媒体
|
|
124
|
+
|
|
125
|
+
自动识别并嵌入音频和视频文件:
|
|
126
|
+
|
|
127
|
+
```markdown
|
|
128
|
+
[音频文件](path/to/audio.mp3)
|
|
129
|
+
[视频文件](path/to/video.mp4)
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
## 样式自定义
|
|
133
|
+
|
|
134
|
+
您可以通过导入并覆盖默认样式来自定义组件外观:
|
|
135
|
+
|
|
136
|
+
```jsx
|
|
137
|
+
import 'zjlab-frontier-markdown/dist/styles/markdown.scss';
|
|
138
|
+
import 'zjlab-frontier-markdown/dist/styles/highlight.scss';
|
|
139
|
+
import './your-custom-styles.scss';
|
|
140
|
+
```
|
|
141
|
+
|
|
142
|
+
## 贡献
|
|
143
|
+
|
|
144
|
+
欢迎提交 Issues 和 Pull Requests!
|
|
145
|
+
|
|
146
|
+
## 许可证
|
|
147
|
+
|
|
148
|
+
MIT
|
|
@@ -0,0 +1,84 @@
|
|
|
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-5_ujiRGo.mjs";
|
|
3
|
+
function cn(l) {
|
|
4
|
+
return l.innerRadius;
|
|
5
|
+
}
|
|
6
|
+
function yn(l) {
|
|
7
|
+
return l.outerRadius;
|
|
8
|
+
}
|
|
9
|
+
function gn(l) {
|
|
10
|
+
return l.startAngle;
|
|
11
|
+
}
|
|
12
|
+
function mn(l) {
|
|
13
|
+
return l.endAngle;
|
|
14
|
+
}
|
|
15
|
+
function pn(l) {
|
|
16
|
+
return l && l.padAngle;
|
|
17
|
+
}
|
|
18
|
+
function xn(l, h, z, E, v, A, O, a) {
|
|
19
|
+
var B = z - l, i = E - h, n = O - v, m = a - A, r = m * B - n * i;
|
|
20
|
+
if (!(r * r < y))
|
|
21
|
+
return r = (n * (h - A) - m * (l - v)) / r, [l + r * B, h + r * i];
|
|
22
|
+
}
|
|
23
|
+
function W(l, h, z, E, v, A, O) {
|
|
24
|
+
var a = l - z, B = h - E, i = (O ? A : -A) / K(a * a + B * B), n = i * B, m = -i * a, r = l + n, s = h + m, f = z + n, c = E + m, S = (r + f) / 2, o = (s + c) / 2, p = f - r, g = c - s, R = p * p + g * g, T = v - A, w = r * c - f * s, C = (g < 0 ? -1 : 1) * K(tn(0, T * T * R - w * w)), F = (w * g - p * C) / R, G = (-w * p - g * C) / R, P = (w * g + p * C) / R, x = (-w * p + g * C) / R, d = F - S, e = G - o, u = P - S, U = x - o;
|
|
25
|
+
return d * d + e * e > u * u + U * U && (F = P, G = x), {
|
|
26
|
+
cx: F,
|
|
27
|
+
cy: G,
|
|
28
|
+
x01: -n,
|
|
29
|
+
y01: -m,
|
|
30
|
+
x11: F * (v / T - 1),
|
|
31
|
+
y11: G * (v / T - 1)
|
|
32
|
+
};
|
|
33
|
+
}
|
|
34
|
+
function vn() {
|
|
35
|
+
var l = cn, h = yn, z = I(0), E = null, v = gn, A = mn, O = pn, a = null, B = ln(i);
|
|
36
|
+
function i() {
|
|
37
|
+
var n, m, r = +l.apply(this, arguments), s = +h.apply(this, arguments), f = v.apply(this, arguments) - rn, c = A.apply(this, arguments) - rn, S = un(c - f), o = c > f;
|
|
38
|
+
if (a || (a = n = B()), s < r && (m = s, s = r, r = m), !(s > y)) a.moveTo(0, 0);
|
|
39
|
+
else if (S > on - y)
|
|
40
|
+
a.moveTo(s * j(f), s * D(f)), a.arc(0, 0, s, f, c, !o), r > y && (a.moveTo(r * j(c), r * D(c)), a.arc(0, 0, r, c, f, o));
|
|
41
|
+
else {
|
|
42
|
+
var p = f, g = c, R = f, T = c, w = S, C = S, F = O.apply(this, arguments) / 2, G = F > y && (E ? +E.apply(this, arguments) : K(r * r + s * s)), P = _(un(s - r) / 2, +z.apply(this, arguments)), x = P, d = P, e, u;
|
|
43
|
+
if (G > y) {
|
|
44
|
+
var U = sn(G / r * D(F)), L = sn(G / s * D(F));
|
|
45
|
+
(w -= U * 2) > y ? (U *= o ? 1 : -1, R += U, T -= U) : (w = 0, R = T = (f + c) / 2), (C -= L * 2) > y ? (L *= o ? 1 : -1, p += L, g -= L) : (C = 0, p = g = (f + c) / 2);
|
|
46
|
+
}
|
|
47
|
+
var H = s * j(p), J = s * D(p), M = r * j(T), N = r * D(T);
|
|
48
|
+
if (P > y) {
|
|
49
|
+
var Q = s * j(g), V = s * D(g), X = r * j(R), Y = r * D(R), q;
|
|
50
|
+
if (S < an)
|
|
51
|
+
if (q = xn(H, J, X, Y, Q, V, M, N)) {
|
|
52
|
+
var Z = H - q[0], $ = J - q[1], k = Q - q[0], b = V - q[1], nn = 1 / D(fn((Z * k + $ * b) / (K(Z * Z + $ * $) * K(k * k + b * b))) / 2), en = K(q[0] * q[0] + q[1] * q[1]);
|
|
53
|
+
x = _(P, (r - en) / (nn - 1)), d = _(P, (s - en) / (nn + 1));
|
|
54
|
+
} else
|
|
55
|
+
x = d = 0;
|
|
56
|
+
}
|
|
57
|
+
C > y ? d > y ? (e = W(X, Y, H, J, s, d, o), u = W(Q, V, M, N, s, d, o), a.moveTo(e.cx + e.x01, e.cy + e.y01), d < P ? a.arc(e.cx, e.cy, d, t(e.y01, e.x01), t(u.y01, u.x01), !o) : (a.arc(e.cx, e.cy, d, t(e.y01, e.x01), t(e.y11, e.x11), !o), a.arc(0, 0, s, t(e.cy + e.y11, e.cx + e.x11), t(u.cy + u.y11, u.cx + u.x11), !o), a.arc(u.cx, u.cy, d, t(u.y11, u.x11), t(u.y01, u.x01), !o))) : (a.moveTo(H, J), a.arc(0, 0, s, p, g, !o)) : a.moveTo(H, J), !(r > y) || !(w > y) ? a.lineTo(M, N) : x > y ? (e = W(M, N, Q, V, r, -x, o), u = W(H, J, X, Y, r, -x, o), a.lineTo(e.cx + e.x01, e.cy + e.y01), x < P ? a.arc(e.cx, e.cy, x, t(e.y01, e.x01), t(u.y01, u.x01), !o) : (a.arc(e.cx, e.cy, x, t(e.y01, e.x01), t(e.y11, e.x11), !o), a.arc(0, 0, r, t(e.cy + e.y11, e.cx + e.x11), t(u.cy + u.y11, u.cx + u.x11), o), a.arc(u.cx, u.cy, x, t(u.y11, u.x11), t(u.y01, u.x01), !o))) : a.arc(0, 0, r, T, R, o);
|
|
58
|
+
}
|
|
59
|
+
if (a.closePath(), n) return a = null, n + "" || null;
|
|
60
|
+
}
|
|
61
|
+
return i.centroid = function() {
|
|
62
|
+
var n = (+l.apply(this, arguments) + +h.apply(this, arguments)) / 2, m = (+v.apply(this, arguments) + +A.apply(this, arguments)) / 2 - an / 2;
|
|
63
|
+
return [j(m) * n, D(m) * n];
|
|
64
|
+
}, i.innerRadius = function(n) {
|
|
65
|
+
return arguments.length ? (l = typeof n == "function" ? n : I(+n), i) : l;
|
|
66
|
+
}, i.outerRadius = function(n) {
|
|
67
|
+
return arguments.length ? (h = typeof n == "function" ? n : I(+n), i) : h;
|
|
68
|
+
}, i.cornerRadius = function(n) {
|
|
69
|
+
return arguments.length ? (z = typeof n == "function" ? n : I(+n), i) : z;
|
|
70
|
+
}, i.padRadius = function(n) {
|
|
71
|
+
return arguments.length ? (E = n == null ? null : typeof n == "function" ? n : I(+n), i) : E;
|
|
72
|
+
}, i.startAngle = function(n) {
|
|
73
|
+
return arguments.length ? (v = typeof n == "function" ? n : I(+n), i) : v;
|
|
74
|
+
}, i.endAngle = function(n) {
|
|
75
|
+
return arguments.length ? (A = typeof n == "function" ? n : I(+n), i) : A;
|
|
76
|
+
}, i.padAngle = function(n) {
|
|
77
|
+
return arguments.length ? (O = typeof n == "function" ? n : I(+n), i) : O;
|
|
78
|
+
}, i.context = function(n) {
|
|
79
|
+
return arguments.length ? (a = n ?? null, i) : a;
|
|
80
|
+
}, i;
|
|
81
|
+
}
|
|
82
|
+
export {
|
|
83
|
+
vn as a
|
|
84
|
+
};
|