ds-markdown 0.0.14 → 0.0.15-beta.0
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.en.md +232 -80
- package/README.ja.md +247 -103
- package/README.ko.md +7 -0
- package/README.md +190 -30
- package/dist/cjs/MarkdownCMD/index.js +2 -2
- package/dist/cjs/MarkdownCMD/index.js.map +1 -1
- package/dist/cjs/components/HighReactMarkdown/index.d.ts +3 -1
- package/dist/cjs/components/HighReactMarkdown/index.js +24 -4
- package/dist/cjs/components/HighReactMarkdown/index.js.map +1 -1
- package/dist/cjs/defined.d.ts +8 -0
- package/dist/cjs/utils/remarkMathBracket.d.ts +7 -0
- package/dist/cjs/utils/remarkMathBracket.js +27 -0
- package/dist/cjs/utils/remarkMathBracket.js.map +1 -0
- package/dist/esm/MarkdownCMD/index.js +2 -2
- package/dist/esm/MarkdownCMD/index.js.map +1 -1
- package/dist/esm/components/HighReactMarkdown/index.d.ts +3 -1
- package/dist/esm/components/HighReactMarkdown/index.js +25 -5
- package/dist/esm/components/HighReactMarkdown/index.js.map +1 -1
- package/dist/esm/defined.d.ts +8 -0
- package/dist/esm/utils/remarkMathBracket.d.ts +7 -0
- package/dist/esm/utils/remarkMathBracket.js +23 -0
- package/dist/esm/utils/remarkMathBracket.js.map +1 -0
- package/dist/katex.css +1 -0
- package/package.json +8 -5
package/README.md
CHANGED
|
@@ -46,6 +46,13 @@
|
|
|
46
46
|
- **命令式 API**：适合流式数据，性能更优
|
|
47
47
|
- **TypeScript 原生支持**：完整类型提示
|
|
48
48
|
|
|
49
|
+
### 🧮 **数学公式支持**
|
|
50
|
+
|
|
51
|
+
- **KaTeX 集成**：高性能数学公式渲染
|
|
52
|
+
- **双语法支持**：`$...$` 和 `\[...\]` 两种分隔符
|
|
53
|
+
- **流式兼容**：完美支持打字动画中的数学公式
|
|
54
|
+
- **主题适配**：自动适配亮色/暗色主题
|
|
55
|
+
|
|
49
56
|
---
|
|
50
57
|
|
|
51
58
|
## 📦 快速安装
|
|
@@ -65,39 +72,16 @@ pnpm add ds-markdown
|
|
|
65
72
|
|
|
66
73
|
无需安装，直接在浏览器中使用：
|
|
67
74
|
|
|
75
|
+
[DEMO](https://stackblitz.com/edit/stackblitz-starters-7vcclcw7?file=index.html)
|
|
76
|
+
|
|
68
77
|
```html
|
|
69
78
|
<!-- 导入样式 -->
|
|
70
79
|
<link rel="stylesheet" href="https://esm.sh/ds-markdown/dist/style.css" />
|
|
80
|
+
<link rel="stylesheet" href="https://esm.sh/ds-markdown/dist/katex.css" />
|
|
71
81
|
|
|
72
82
|
<!-- 导入组件 -->
|
|
73
|
-
<script type="
|
|
74
|
-
|
|
75
|
-
"imports": {
|
|
76
|
-
"react": "https://esm.sh/react@19.1.0",
|
|
77
|
-
"react-dom/client": "https://esm.sh/react-dom@19.1.0/client",
|
|
78
|
-
"ds-markdown": "https://esm.sh/ds-markdown"
|
|
79
|
-
}
|
|
80
|
-
}
|
|
81
|
-
</script>
|
|
82
|
-
<script type="module" src="https://esm.sh/tsx"></script>
|
|
83
|
-
|
|
84
|
-
<script type="text/babel">
|
|
85
|
-
import { createRoot } from 'react-dom/client';
|
|
86
|
-
import DsMarkdown from 'ds-markdown';
|
|
87
|
-
|
|
88
|
-
const markdown = `
|
|
89
|
-
# Hello ds-markdown
|
|
90
|
-
|
|
91
|
-
这是一个**高性能**的 Markdown 打字动画组件！
|
|
92
|
-
|
|
93
|
-
## 特性
|
|
94
|
-
- ⚡ 零延迟流式处理
|
|
95
|
-
- 🎬 流畅的打字动画
|
|
96
|
-
- 🎯 完美的语法支持
|
|
97
|
-
`;
|
|
98
|
-
|
|
99
|
-
const root = createRoot(document.getElementById('root'));
|
|
100
|
-
root.render(<DsMarkdown interval={20}>{markdown}</DsMarkdown>);
|
|
83
|
+
<script type="module">
|
|
84
|
+
import Markdown from 'https://esm.sh/ds-markdown';
|
|
101
85
|
</script>
|
|
102
86
|
```
|
|
103
87
|
|
|
@@ -120,6 +104,22 @@ function App() {
|
|
|
120
104
|
}
|
|
121
105
|
```
|
|
122
106
|
|
|
107
|
+
### 数学公式支持
|
|
108
|
+
|
|
109
|
+
```tsx
|
|
110
|
+
import DsMarkdown from 'ds-markdown';
|
|
111
|
+
import 'ds-markdown/style.css';
|
|
112
|
+
import 'ds-markdown/katex.css'; // 引入数学公式样式
|
|
113
|
+
|
|
114
|
+
function MathDemo() {
|
|
115
|
+
return (
|
|
116
|
+
<DsMarkdown interval={20} answerType="answer" math={{ isOpen: true, splitSymbol: 'dollar' }}>
|
|
117
|
+
# 勾股定理 在直角三角形中，斜边的平方等于两条直角边的平方和： $a^2 + b^2 = c^2$ 其中： - $a$ 和 $b$ 是直角边 - $c$ 是斜边 对于经典的"勾三股四弦五"： $c = \sqrt{3 ^ (2 + 4) ^ 2} = \sqrt{25} = 5$
|
|
118
|
+
</DsMarkdown>
|
|
119
|
+
);
|
|
120
|
+
}
|
|
121
|
+
```
|
|
122
|
+
|
|
123
123
|
### AI 对话场景
|
|
124
124
|
|
|
125
125
|
```tsx
|
|
@@ -176,10 +176,23 @@ React 19 带来了许多激动人心的新特性：
|
|
|
176
176
|
| `timerType` | `'setTimeout'` \| `'requestAnimationFrame'` | 定时器类型 | 当前默认值是`setTimeout`，后期会改为`requestAnimationFrame` |
|
|
177
177
|
| `answerType` | `'thinking'` \| `'answer'` | 内容类型 (影响样式主题) | `'answer'` |
|
|
178
178
|
| `theme` | `'light'` \| `'dark'` | 主题类型 | `'light'` |
|
|
179
|
+
| `math` | [IMarkdownMath ](#IMarkdownMath) | 数学公式配置 | `{ isOpen: false, splitSymbol: 'dollar' }` |
|
|
179
180
|
| `onEnd` | `(data: EndData) => void` | 打字结束回调 | - |
|
|
180
181
|
| `onStart` | `(data: StartData) => void` | 打字开始回调 | - |
|
|
181
182
|
| `onTypedChar` | `(data: CharData) => void` | 每字符打字回调 | - |
|
|
182
183
|
|
|
184
|
+
### IMarkdownMath
|
|
185
|
+
|
|
186
|
+
| 属性 | 类型 | 说明 | 默认值 |
|
|
187
|
+
| ------------- | ------------------------- | -------------------- | ---------- |
|
|
188
|
+
| `isOpen` | `boolean` | 是否开启数学公式渲染 | `false` |
|
|
189
|
+
| `splitSymbol` | `'dollar'` \| `'bracket'` | 数学公式分隔符类型 | `'dollar'` |
|
|
190
|
+
|
|
191
|
+
**分隔符说明：**
|
|
192
|
+
|
|
193
|
+
- `'dollar'`：使用 `$...$` 和 `$$...$$` 语法
|
|
194
|
+
- `'bracket'`：使用 `\(...\)` 和 `\[...\]` 语法
|
|
195
|
+
|
|
183
196
|
### 命令式 API (推荐流式场景)
|
|
184
197
|
|
|
185
198
|
| 方法 | 参数 | 说明 |
|
|
@@ -199,6 +212,83 @@ markdownRef.current?.resume(); // 恢复动画
|
|
|
199
212
|
|
|
200
213
|
---
|
|
201
214
|
|
|
215
|
+
## 🧮 数学公式使用指南
|
|
216
|
+
|
|
217
|
+
[DEMO](https://stackblitz.com/edit/vitejs-vite-4whdsqcr?file=src%2FApp.tsx)
|
|
218
|
+
|
|
219
|
+
### 基本语法
|
|
220
|
+
|
|
221
|
+
```tsx
|
|
222
|
+
// 1. 启用数学公式支持
|
|
223
|
+
<DsMarkdown math={{ isOpen: true }}>
|
|
224
|
+
# 数学公式示例
|
|
225
|
+
|
|
226
|
+
// 行内公式
|
|
227
|
+
这是一个行内公式：$E = mc^2$
|
|
228
|
+
|
|
229
|
+
// 块级公式
|
|
230
|
+
$$\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}$$
|
|
231
|
+
</DsMarkdown>
|
|
232
|
+
```
|
|
233
|
+
|
|
234
|
+
### 分隔符选择
|
|
235
|
+
|
|
236
|
+
```tsx
|
|
237
|
+
// 使用美元符号分隔符（默认）
|
|
238
|
+
<DsMarkdown math={{ isOpen: true, splitSymbol: 'dollar' }}>
|
|
239
|
+
行内：$a + b = c$
|
|
240
|
+
块级：$$\sum_{i=1}^{n} x_i = x_1 + x_2 + \cdots + x_n$$
|
|
241
|
+
</DsMarkdown>
|
|
242
|
+
|
|
243
|
+
// 使用括号分隔符
|
|
244
|
+
<DsMarkdown math={{ isOpen: true, splitSymbol: 'bracket' }}>
|
|
245
|
+
行内：\(a + b = c\)
|
|
246
|
+
块级：\[\sum_{i=1}^{n} x_i = x_1 + x_2 + \cdots + x_n\]
|
|
247
|
+
</DsMarkdown>
|
|
248
|
+
```
|
|
249
|
+
|
|
250
|
+
### 流式数学公式
|
|
251
|
+
|
|
252
|
+
```tsx
|
|
253
|
+
// 完美支持流式输出中的数学公式
|
|
254
|
+
const mathContent = [
|
|
255
|
+
'勾股定理：',
|
|
256
|
+
'$a^2 + b^2 = c^2$',
|
|
257
|
+
'\n\n',
|
|
258
|
+
'其中：',
|
|
259
|
+
'- $a$ 和 $b$ 是直角边\n',
|
|
260
|
+
'- $c$ 是斜边\n\n',
|
|
261
|
+
'对于经典的"勾三股四弦五"：\n',
|
|
262
|
+
'$c = \\sqrt{3^2 + 4^2} = \\sqrt{25} = 5$\n\n',
|
|
263
|
+
'这个定理在几何学中有着广泛的应用！',
|
|
264
|
+
];
|
|
265
|
+
|
|
266
|
+
mathContent.forEach((chunk) => {
|
|
267
|
+
markdownRef.current?.push(chunk, 'answer');
|
|
268
|
+
});
|
|
269
|
+
```
|
|
270
|
+
|
|
271
|
+
### 样式定制
|
|
272
|
+
|
|
273
|
+
```css
|
|
274
|
+
/* 数学公式样式定制 */
|
|
275
|
+
.katex {
|
|
276
|
+
font-size: 1.1em;
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
.katex-display {
|
|
280
|
+
margin: 1em 0;
|
|
281
|
+
text-align: center;
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
/* 暗色主题适配 */
|
|
285
|
+
[data-theme='dark'] .katex {
|
|
286
|
+
color: #e1e1e1;
|
|
287
|
+
}
|
|
288
|
+
```
|
|
289
|
+
|
|
290
|
+
---
|
|
291
|
+
|
|
202
292
|
## 🎛️ 定时器模式详解
|
|
203
293
|
|
|
204
294
|
### `requestAnimationFrame` 模式 🌟 (推荐)
|
|
@@ -310,6 +400,43 @@ function StreamingChat() {
|
|
|
310
400
|
const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
|
|
311
401
|
````
|
|
312
402
|
|
|
403
|
+
### 🧮 数学公式流式渲染
|
|
404
|
+
|
|
405
|
+
```tsx
|
|
406
|
+
function MathStreamingDemo() {
|
|
407
|
+
const markdownRef = useRef<MarkdownCMDRef>(null);
|
|
408
|
+
|
|
409
|
+
const simulateMathResponse = async () => {
|
|
410
|
+
markdownRef.current?.clear();
|
|
411
|
+
|
|
412
|
+
const mathChunks = [
|
|
413
|
+
'# 勾股定理详解\n\n',
|
|
414
|
+
'在直角三角形中，斜边的平方等于两条直角边的平方和：\n\n',
|
|
415
|
+
'$a^2 + b^2 = c^2$\n\n',
|
|
416
|
+
'其中：\n',
|
|
417
|
+
'- $a$ 和 $b$ 是直角边\n',
|
|
418
|
+
'- $c$ 是斜边\n\n',
|
|
419
|
+
'对于经典的"勾三股四弦五"：\n',
|
|
420
|
+
'$c = \\sqrt{3^2 + 4^2} = \\sqrt{25} = 5$\n\n',
|
|
421
|
+
'这个定理在几何学中有着广泛的应用！',
|
|
422
|
+
];
|
|
423
|
+
|
|
424
|
+
for (const chunk of mathChunks) {
|
|
425
|
+
await delay(150);
|
|
426
|
+
markdownRef.current?.push(chunk, 'answer');
|
|
427
|
+
}
|
|
428
|
+
};
|
|
429
|
+
|
|
430
|
+
return (
|
|
431
|
+
<div>
|
|
432
|
+
<button onClick={simulateMathResponse}>📐 讲解勾股定理</button>
|
|
433
|
+
|
|
434
|
+
<MarkdownCMD ref={markdownRef} interval={20} timerType="requestAnimationFrame" math={{ isOpen: true, splitSymbol: 'dollar' }} />
|
|
435
|
+
</div>
|
|
436
|
+
);
|
|
437
|
+
}
|
|
438
|
+
```
|
|
439
|
+
|
|
313
440
|
### 🔄 流式 Markdown 语法处理
|
|
314
441
|
|
|
315
442
|
**核心问题**：流式输出时，不完整的 Markdown 语法会导致渲染错误
|
|
@@ -356,11 +483,14 @@ const handleStreamingMarkdown = () => {
|
|
|
356
483
|
'```javascript'; // 代码块开始
|
|
357
484
|
'```'; // 代码块结束
|
|
358
485
|
'内容以换行结尾\n'; // 换行边界
|
|
486
|
+
'$a + b$'; // 完整数学公式
|
|
487
|
+
'$$\\sum x$$'; // 完整块级数学公式
|
|
359
488
|
|
|
360
489
|
// 🔄 不完整语法 (智能缓冲)
|
|
361
490
|
'##'; // 只有标题符号
|
|
362
491
|
'1'; // 只有数字
|
|
363
492
|
'```java'; // 可能的代码块开始
|
|
493
|
+
'$a +'; // 不完整的数学公式
|
|
364
494
|
````
|
|
365
495
|
|
|
366
496
|
---
|
|
@@ -394,7 +524,22 @@ const [content, setContent] = useState('');
|
|
|
394
524
|
// 每次更新都会重新解析整个内容
|
|
395
525
|
```
|
|
396
526
|
|
|
397
|
-
### 3.
|
|
527
|
+
### 3. 数学公式优化
|
|
528
|
+
|
|
529
|
+
```tsx
|
|
530
|
+
// ✅ 推荐：按需加载数学公式样式
|
|
531
|
+
import 'ds-markdown/style.css';
|
|
532
|
+
import 'ds-markdown/katex.css'; // 仅在需要时引入
|
|
533
|
+
|
|
534
|
+
// ✅ 推荐：合理使用分隔符
|
|
535
|
+
// 对于简单公式，使用 $...$ 更简洁
|
|
536
|
+
// 对于复杂公式，使用 $$...$$ 更清晰
|
|
537
|
+
|
|
538
|
+
// ❌ 避免：在不需要时开启数学公式
|
|
539
|
+
<DsMarkdown math={{ isOpen: true }}>纯文本内容</DsMarkdown>;
|
|
540
|
+
```
|
|
541
|
+
|
|
542
|
+
### 4. 类型安全
|
|
398
543
|
|
|
399
544
|
```tsx
|
|
400
545
|
import { MarkdownCMDRef } from 'ds-markdown';
|
|
@@ -403,7 +548,7 @@ const ref = useRef<MarkdownCMDRef>(null);
|
|
|
403
548
|
// 完整的 TypeScript 类型提示
|
|
404
549
|
```
|
|
405
550
|
|
|
406
|
-
###
|
|
551
|
+
### 5. 样式定制
|
|
407
552
|
|
|
408
553
|
```css
|
|
409
554
|
/* 思考区域样式 */
|
|
@@ -443,6 +588,21 @@ const ref = useRef<MarkdownCMDRef>(null);
|
|
|
443
588
|
padding: 8px 12px;
|
|
444
589
|
text-align: left;
|
|
445
590
|
}
|
|
591
|
+
|
|
592
|
+
/* 数学公式样式 */
|
|
593
|
+
.katex {
|
|
594
|
+
font-size: 1.1em;
|
|
595
|
+
}
|
|
596
|
+
|
|
597
|
+
.katex-display {
|
|
598
|
+
margin: 1em 0;
|
|
599
|
+
text-align: center;
|
|
600
|
+
}
|
|
601
|
+
|
|
602
|
+
/* 暗色主题数学公式 */
|
|
603
|
+
[data-theme='dark'] .katex {
|
|
604
|
+
color: #e1e1e1;
|
|
605
|
+
}
|
|
446
606
|
```
|
|
447
607
|
|
|
448
608
|
---
|
|
@@ -9,7 +9,7 @@ const index_js_1 = __importDefault(require("../components/HighReactMarkdown/inde
|
|
|
9
9
|
const classnames_1 = __importDefault(require("classnames"));
|
|
10
10
|
const constant_js_1 = require("../constant.js");
|
|
11
11
|
const useTypingTask_js_1 = require("../hooks/useTypingTask.js");
|
|
12
|
-
const MarkdownCMD = (0, react_1.forwardRef)(({ interval = 30, onEnd, onStart, onTypedChar, timerType = 'setTimeout', theme = 'light' }, ref) => {
|
|
12
|
+
const MarkdownCMD = (0, react_1.forwardRef)(({ interval = 30, onEnd, onStart, onTypedChar, timerType = 'setTimeout', theme = 'light', math }, ref) => {
|
|
13
13
|
/** 当前需要打字的内容 */
|
|
14
14
|
const charsRef = (0, react_1.useRef)([]);
|
|
15
15
|
/**
|
|
@@ -139,7 +139,7 @@ const MarkdownCMD = (0, react_1.forwardRef)(({ interval = 30, onEnd, onStart, on
|
|
|
139
139
|
*/
|
|
140
140
|
}));
|
|
141
141
|
const getParagraphs = (answerType) => {
|
|
142
|
-
return ((0, jsx_runtime_1.jsx)("div", { className: `ds-markdown-paragraph ds-typed-${answerType}`, children: (0, jsx_runtime_1.jsx)(index_js_1.default, { theme: theme, children: wholeContentRef.current[answerType].content || '' }) }));
|
|
142
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: `ds-markdown-paragraph ds-typed-${answerType}`, children: (0, jsx_runtime_1.jsx)(index_js_1.default, { theme: theme, math: math, children: wholeContentRef.current[answerType].content || '' }) }));
|
|
143
143
|
};
|
|
144
144
|
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)({
|
|
145
145
|
'ds-markdown': true,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/MarkdownCMD/index.tsx"],"names":[],"mappings":";;;;;;AAAA,iCAA0E;AAE1E,wFAAyE;AACzE,4DAAoC;AAEpC,gDAAyC;AACzC,gEAA0D;AAI1D,MAAM,WAAW,GAAG,IAAA,kBAAU,EAAmC,CAAC,EAAE,QAAQ,GAAG,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,SAAS,GAAG,YAAY,EAAE,KAAK,GAAG,OAAO,EAAE,EAAE,GAAG,EAAE,EAAE;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/MarkdownCMD/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { Options } from 'react-markdown';
|
|
3
|
-
import { Theme } from '../../defined.js';
|
|
3
|
+
import { IMarkdownMath, Theme } from '../../defined.js';
|
|
4
4
|
interface HighReactMarkdownProps extends Options {
|
|
5
5
|
theme?: Theme;
|
|
6
|
+
children: string;
|
|
7
|
+
math?: IMarkdownMath;
|
|
6
8
|
}
|
|
7
9
|
declare const _default: React.NamedExoticComponent<HighReactMarkdownProps>;
|
|
8
10
|
export default _default;
|
|
@@ -8,10 +8,30 @@ const react_1 = require("react");
|
|
|
8
8
|
const react_markdown_1 = __importDefault(require("react-markdown"));
|
|
9
9
|
const react_syntax_highlighter_1 = require("react-syntax-highlighter");
|
|
10
10
|
const remark_gfm_1 = __importDefault(require("remark-gfm"));
|
|
11
|
+
const rehype_katex_1 = __importDefault(require("rehype-katex"));
|
|
12
|
+
const remark_math_1 = __importDefault(require("remark-math"));
|
|
13
|
+
const remarkMathBracket_js_1 = require("../../utils/remarkMathBracket.js");
|
|
11
14
|
const index_js_1 = __importDefault(require("../BlockWrap/index.js"));
|
|
12
|
-
const
|
|
13
|
-
|
|
14
|
-
|
|
15
|
+
const HighReactMarkdown = ({ theme = 'light', children: _children, math, ...props }) => {
|
|
16
|
+
let children = _children;
|
|
17
|
+
const mathOpen = math?.isOpen ?? false;
|
|
18
|
+
const mathSplitSymbol = math?.splitSymbol ?? 'dollar';
|
|
19
|
+
if (mathOpen && mathSplitSymbol === 'bracket') {
|
|
20
|
+
children = (0, remarkMathBracket_js_1.replaceMathBracket)(children);
|
|
21
|
+
}
|
|
22
|
+
const remarkPlugins = (0, react_1.useMemo)(() => {
|
|
23
|
+
if (math?.isOpen) {
|
|
24
|
+
return [remark_gfm_1.default, remark_math_1.default];
|
|
25
|
+
}
|
|
26
|
+
return [remark_gfm_1.default];
|
|
27
|
+
}, [math]);
|
|
28
|
+
const rehypePlugins = (0, react_1.useMemo)(() => {
|
|
29
|
+
if (mathOpen) {
|
|
30
|
+
return [rehype_katex_1.default];
|
|
31
|
+
}
|
|
32
|
+
return [];
|
|
33
|
+
}, [mathOpen]);
|
|
34
|
+
return ((0, jsx_runtime_1.jsx)(react_markdown_1.default, { remarkPlugins: remarkPlugins, rehypePlugins: rehypePlugins, components: {
|
|
15
35
|
code: ({ className, children, ...props }) => {
|
|
16
36
|
const match = /language-(\w+)/.exec(className || '');
|
|
17
37
|
return match ? ((0, jsx_runtime_1.jsx)(index_js_1.default, { language: match[1], theme: theme, children: (0, jsx_runtime_1.jsx)(react_syntax_highlighter_1.Prism, { useInlineStyles: false, language: match[1], style: {}, children: String(children).replace(/\n$/, '') }) })) : ((0, jsx_runtime_1.jsx)("code", { className: className, ...props, children: children }));
|
|
@@ -19,7 +39,7 @@ const HighReactMarkdown = ({ theme = 'light', ...props }) => {
|
|
|
19
39
|
table: ({ children, ...props }) => {
|
|
20
40
|
return ((0, jsx_runtime_1.jsx)("div", { className: "markdown-table-wrapper", children: (0, jsx_runtime_1.jsx)("table", { className: "ds-markdown-table", children: children }) }));
|
|
21
41
|
},
|
|
22
|
-
}, ...props }));
|
|
42
|
+
}, ...props, children: children }));
|
|
23
43
|
};
|
|
24
44
|
exports.default = (0, react_1.memo)(HighReactMarkdown);
|
|
25
45
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/HighReactMarkdown/index.tsx"],"names":[],"mappings":";;;;;;AAAA,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/HighReactMarkdown/index.tsx"],"names":[],"mappings":";;;;;;AAAA,iCAA6C;AAC7C,oEAAsC;AAEtC,uEAAsE;AACtE,4DAAmC;AACnC,gEAAuC;AACvC,8DAAqC;AACrC,2EAAsE;AACtE,qEAA8C;AAS9C,MAAM,iBAAiB,GAAqC,CAAC,EAAE,KAAK,GAAG,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACvH,IAAI,QAAQ,GAAG,SAAS,CAAC;IAEzB,MAAM,QAAQ,GAAG,IAAI,EAAE,MAAM,IAAI,KAAK,CAAC;IACvC,MAAM,eAAe,GAAG,IAAI,EAAE,WAAW,IAAI,QAAQ,CAAC;IAEtD,IAAI,QAAQ,IAAI,eAAe,KAAK,SAAS,EAAE,CAAC;QAC9C,QAAQ,GAAG,IAAA,yCAAkB,EAAC,QAAQ,CAAC,CAAC;IAC1C,CAAC;IAED,MAAM,aAAa,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QACjC,IAAI,IAAI,EAAE,MAAM,EAAE,CAAC;YACjB,OAAO,CAAC,oBAAS,EAAE,qBAAU,CAAC,CAAC;QACjC,CAAC;QACD,OAAO,CAAC,oBAAS,CAAC,CAAC;IACrB,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,MAAM,aAAa,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QACjC,IAAI,QAAQ,EAAE,CAAC;YACb,OAAO,CAAC,sBAAW,CAAC,CAAC;QACvB,CAAC;QACD,OAAO,EAAE,CAAC;IACZ,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,OAAO,CACL,uBAAC,wBAAQ,IACP,aAAa,EAAE,aAAa,EAC5B,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE;YACV,IAAI,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;gBAC1C,MAAM,KAAK,GAAG,gBAAgB,CAAC,IAAI,CAAC,SAAS,IAAI,EAAE,CAAC,CAAC;gBACrD,OAAO,KAAK,CAAC,CAAC,CAAC,CACb,uBAAC,kBAAS,IAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,YACzC,uBAAC,gCAAiB,IAAC,eAAe,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,YACrE,MAAM,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,GAClB,GACV,CACb,CAAC,CAAC,CAAC,CACF,iCAAM,SAAS,EAAE,SAAS,KAAM,KAAK,YAClC,QAAQ,GACJ,CACR,CAAC;YACJ,CAAC;YACD,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;gBAChC,OAAO,CACL,gCAAK,SAAS,EAAC,wBAAwB,YACrC,kCAAO,SAAS,EAAC,mBAAmB,YAAE,QAAQ,GAAS,GACnD,CACP,CAAC;YACJ,CAAC;SACF,KACG,KAAK,YAER,QAAQ,GACA,CACZ,CAAC;AACJ,CAAC,CAAC;AACF,kBAAe,IAAA,YAAI,EAAC,iBAAiB,CAAC,CAAC"}
|
package/dist/cjs/defined.d.ts
CHANGED
|
@@ -69,6 +69,14 @@ export interface MarkdownProps {
|
|
|
69
69
|
onTypedChar?: (data?: IOnTypedEndCharData) => void;
|
|
70
70
|
/** 主题 */
|
|
71
71
|
theme?: Theme;
|
|
72
|
+
/** 数学公式配置 */
|
|
73
|
+
math?: IMarkdownMath;
|
|
74
|
+
}
|
|
75
|
+
export interface IMarkdownMath {
|
|
76
|
+
/** 是括号还是$作为分隔符, 默认是$ */
|
|
77
|
+
splitSymbol: 'bracket' | 'dollar';
|
|
78
|
+
/** 是否开启数学公式 */
|
|
79
|
+
isOpen?: boolean;
|
|
72
80
|
}
|
|
73
81
|
export interface IWholeContent {
|
|
74
82
|
thinking: {
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.replaceMathBracket = void 0;
|
|
4
|
+
const unist_util_visit_1 = require("unist-util-visit");
|
|
5
|
+
/**
|
|
6
|
+
* remark 插件：将 \[...\] 转换为 $$...$$，\(...\) 转换为 $...$，以便 remark-math 能识别。
|
|
7
|
+
*/
|
|
8
|
+
const remarkMathBracket = () => (tree, file) => {
|
|
9
|
+
(0, unist_util_visit_1.visit)(tree, 'text', (node) => {
|
|
10
|
+
const value = node.value;
|
|
11
|
+
if (typeof value === 'string') {
|
|
12
|
+
node.value = (0, exports.replaceMathBracket)(value);
|
|
13
|
+
}
|
|
14
|
+
});
|
|
15
|
+
};
|
|
16
|
+
const replaceMathBracket = (value) => {
|
|
17
|
+
return value
|
|
18
|
+
.replace(/\[([\s\S]+?)\]/g, (_match, p1) => {
|
|
19
|
+
return `$$${p1}$$`;
|
|
20
|
+
})
|
|
21
|
+
.replace(/\(([\s\S]+?)\)/g, (_match, p1) => {
|
|
22
|
+
return `$${p1}$`;
|
|
23
|
+
});
|
|
24
|
+
};
|
|
25
|
+
exports.replaceMathBracket = replaceMathBracket;
|
|
26
|
+
exports.default = remarkMathBracket;
|
|
27
|
+
//# sourceMappingURL=remarkMathBracket.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"remarkMathBracket.js","sourceRoot":"","sources":["../../../src/utils/remarkMathBracket.ts"],"names":[],"mappings":";;;AACA,uDAAyC;AAEzC;;GAEG;AACH,MAAM,iBAAiB,GAAW,GAAG,EAAE,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE;IACrD,IAAA,wBAAK,EAAC,IAAI,EAAE,MAAM,EAAE,CAAC,IAAS,EAAE,EAAE;QAChC,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;QAEzB,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;YAC9B,IAAI,CAAC,KAAK,GAAG,IAAA,0BAAkB,EAAC,KAAK,CAAC,CAAC;QACzC,CAAC;IACH,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEK,MAAM,kBAAkB,GAAG,CAAC,KAAa,EAAE,EAAE;IAClD,OAAO,KAAK;SACT,OAAO,CAAC,iBAAiB,EAAE,CAAC,MAAM,EAAE,EAAE,EAAE,EAAE;QACzC,OAAO,KAAK,EAAE,IAAI,CAAC;IACrB,CAAC,CAAC;SACD,OAAO,CAAC,iBAAiB,EAAE,CAAC,MAAM,EAAE,EAAE,EAAE,EAAE;QACzC,OAAO,IAAI,EAAE,GAAG,CAAC;IACnB,CAAC,CAAC,CAAC;AACP,CAAC,CAAC;AARW,QAAA,kBAAkB,sBAQ7B;AAEF,kBAAe,iBAAiB,CAAC"}
|
|
@@ -4,7 +4,7 @@ import HighReactMarkdown from '../components/HighReactMarkdown/index.js';
|
|
|
4
4
|
import classNames from 'classnames';
|
|
5
5
|
import { __DEV__ } from '../constant.js';
|
|
6
6
|
import { useTypingTask } from '../hooks/useTypingTask.js';
|
|
7
|
-
const MarkdownCMD = forwardRef(({ interval = 30, onEnd, onStart, onTypedChar, timerType = 'setTimeout', theme = 'light' }, ref) => {
|
|
7
|
+
const MarkdownCMD = forwardRef(({ interval = 30, onEnd, onStart, onTypedChar, timerType = 'setTimeout', theme = 'light', math }, ref) => {
|
|
8
8
|
/** 当前需要打字的内容 */
|
|
9
9
|
const charsRef = useRef([]);
|
|
10
10
|
/**
|
|
@@ -134,7 +134,7 @@ const MarkdownCMD = forwardRef(({ interval = 30, onEnd, onStart, onTypedChar, ti
|
|
|
134
134
|
*/
|
|
135
135
|
}));
|
|
136
136
|
const getParagraphs = (answerType) => {
|
|
137
|
-
return (_jsx("div", { className: `ds-markdown-paragraph ds-typed-${answerType}`, children: _jsx(HighReactMarkdown, { theme: theme, children: wholeContentRef.current[answerType].content || '' }) }));
|
|
137
|
+
return (_jsx("div", { className: `ds-markdown-paragraph ds-typed-${answerType}`, children: _jsx(HighReactMarkdown, { theme: theme, math: math, children: wholeContentRef.current[answerType].content || '' }) }));
|
|
138
138
|
};
|
|
139
139
|
return (_jsxs("div", { className: classNames({
|
|
140
140
|
'ds-markdown': true,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/MarkdownCMD/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE1E,OAAO,iBAAiB,MAAM,0CAA0C,CAAC;AACzE,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAI1D,MAAM,WAAW,GAAG,UAAU,CAAmC,CAAC,EAAE,QAAQ,GAAG,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,SAAS,GAAG,YAAY,EAAE,KAAK,GAAG,OAAO,EAAE,EAAE,GAAG,EAAE,EAAE;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/MarkdownCMD/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { Options } from 'react-markdown';
|
|
3
|
-
import { Theme } from '../../defined.js';
|
|
3
|
+
import { IMarkdownMath, Theme } from '../../defined.js';
|
|
4
4
|
interface HighReactMarkdownProps extends Options {
|
|
5
5
|
theme?: Theme;
|
|
6
|
+
children: string;
|
|
7
|
+
math?: IMarkdownMath;
|
|
6
8
|
}
|
|
7
9
|
declare const _default: React.NamedExoticComponent<HighReactMarkdownProps>;
|
|
8
10
|
export default _default;
|
|
@@ -1,12 +1,32 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { memo } from 'react';
|
|
2
|
+
import { memo, useMemo } from 'react';
|
|
3
3
|
import Markdown from 'react-markdown';
|
|
4
4
|
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
|
|
5
5
|
import gfmPlugin from 'remark-gfm';
|
|
6
|
+
import rehypeKatex from 'rehype-katex';
|
|
7
|
+
import remarkMath from 'remark-math';
|
|
8
|
+
import { replaceMathBracket } from '../../utils/remarkMathBracket.js';
|
|
6
9
|
import BlockWrap from '../BlockWrap/index.js';
|
|
7
|
-
const
|
|
8
|
-
|
|
9
|
-
|
|
10
|
+
const HighReactMarkdown = ({ theme = 'light', children: _children, math, ...props }) => {
|
|
11
|
+
let children = _children;
|
|
12
|
+
const mathOpen = math?.isOpen ?? false;
|
|
13
|
+
const mathSplitSymbol = math?.splitSymbol ?? 'dollar';
|
|
14
|
+
if (mathOpen && mathSplitSymbol === 'bracket') {
|
|
15
|
+
children = replaceMathBracket(children);
|
|
16
|
+
}
|
|
17
|
+
const remarkPlugins = useMemo(() => {
|
|
18
|
+
if (math?.isOpen) {
|
|
19
|
+
return [gfmPlugin, remarkMath];
|
|
20
|
+
}
|
|
21
|
+
return [gfmPlugin];
|
|
22
|
+
}, [math]);
|
|
23
|
+
const rehypePlugins = useMemo(() => {
|
|
24
|
+
if (mathOpen) {
|
|
25
|
+
return [rehypeKatex];
|
|
26
|
+
}
|
|
27
|
+
return [];
|
|
28
|
+
}, [mathOpen]);
|
|
29
|
+
return (_jsx(Markdown, { remarkPlugins: remarkPlugins, rehypePlugins: rehypePlugins, components: {
|
|
10
30
|
code: ({ className, children, ...props }) => {
|
|
11
31
|
const match = /language-(\w+)/.exec(className || '');
|
|
12
32
|
return match ? (_jsx(BlockWrap, { language: match[1], theme: theme, children: _jsx(SyntaxHighlighter, { useInlineStyles: false, language: match[1], style: {}, children: String(children).replace(/\n$/, '') }) })) : (_jsx("code", { className: className, ...props, children: children }));
|
|
@@ -14,7 +34,7 @@ const HighReactMarkdown = ({ theme = 'light', ...props }) => {
|
|
|
14
34
|
table: ({ children, ...props }) => {
|
|
15
35
|
return (_jsx("div", { className: "markdown-table-wrapper", children: _jsx("table", { className: "ds-markdown-table", children: children }) }));
|
|
16
36
|
},
|
|
17
|
-
}, ...props }));
|
|
37
|
+
}, ...props, children: children }));
|
|
18
38
|
};
|
|
19
39
|
export default memo(HighReactMarkdown);
|
|
20
40
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/HighReactMarkdown/index.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/HighReactMarkdown/index.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,QAAQ,MAAM,gBAAgB,CAAC;AAEtC,OAAO,EAAE,KAAK,IAAI,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,WAAW,MAAM,cAAc,CAAC;AACvC,OAAO,UAAU,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,SAAS,MAAM,uBAAuB,CAAC;AAS9C,MAAM,iBAAiB,GAAqC,CAAC,EAAE,KAAK,GAAG,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACvH,IAAI,QAAQ,GAAG,SAAS,CAAC;IAEzB,MAAM,QAAQ,GAAG,IAAI,EAAE,MAAM,IAAI,KAAK,CAAC;IACvC,MAAM,eAAe,GAAG,IAAI,EAAE,WAAW,IAAI,QAAQ,CAAC;IAEtD,IAAI,QAAQ,IAAI,eAAe,KAAK,SAAS,EAAE,CAAC;QAC9C,QAAQ,GAAG,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IAC1C,CAAC;IAED,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,IAAI,IAAI,EAAE,MAAM,EAAE,CAAC;YACjB,OAAO,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;QACjC,CAAC;QACD,OAAO,CAAC,SAAS,CAAC,CAAC;IACrB,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,IAAI,QAAQ,EAAE,CAAC;YACb,OAAO,CAAC,WAAW,CAAC,CAAC;QACvB,CAAC;QACD,OAAO,EAAE,CAAC;IACZ,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,OAAO,CACL,KAAC,QAAQ,IACP,aAAa,EAAE,aAAa,EAC5B,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE;YACV,IAAI,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;gBAC1C,MAAM,KAAK,GAAG,gBAAgB,CAAC,IAAI,CAAC,SAAS,IAAI,EAAE,CAAC,CAAC;gBACrD,OAAO,KAAK,CAAC,CAAC,CAAC,CACb,KAAC,SAAS,IAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,YACzC,KAAC,iBAAiB,IAAC,eAAe,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,YACrE,MAAM,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,GAClB,GACV,CACb,CAAC,CAAC,CAAC,CACF,eAAM,SAAS,EAAE,SAAS,KAAM,KAAK,YAClC,QAAQ,GACJ,CACR,CAAC;YACJ,CAAC;YACD,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;gBAChC,OAAO,CACL,cAAK,SAAS,EAAC,wBAAwB,YACrC,gBAAO,SAAS,EAAC,mBAAmB,YAAE,QAAQ,GAAS,GACnD,CACP,CAAC;YACJ,CAAC;SACF,KACG,KAAK,YAER,QAAQ,GACA,CACZ,CAAC;AACJ,CAAC,CAAC;AACF,eAAe,IAAI,CAAC,iBAAiB,CAAC,CAAC"}
|
package/dist/esm/defined.d.ts
CHANGED
|
@@ -69,6 +69,14 @@ export interface MarkdownProps {
|
|
|
69
69
|
onTypedChar?: (data?: IOnTypedEndCharData) => void;
|
|
70
70
|
/** 主题 */
|
|
71
71
|
theme?: Theme;
|
|
72
|
+
/** 数学公式配置 */
|
|
73
|
+
math?: IMarkdownMath;
|
|
74
|
+
}
|
|
75
|
+
export interface IMarkdownMath {
|
|
76
|
+
/** 是括号还是$作为分隔符, 默认是$ */
|
|
77
|
+
splitSymbol: 'bracket' | 'dollar';
|
|
78
|
+
/** 是否开启数学公式 */
|
|
79
|
+
isOpen?: boolean;
|
|
72
80
|
}
|
|
73
81
|
export interface IWholeContent {
|
|
74
82
|
thinking: {
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { visit } from 'unist-util-visit';
|
|
2
|
+
/**
|
|
3
|
+
* remark 插件：将 \[...\] 转换为 $$...$$，\(...\) 转换为 $...$，以便 remark-math 能识别。
|
|
4
|
+
*/
|
|
5
|
+
const remarkMathBracket = () => (tree, file) => {
|
|
6
|
+
visit(tree, 'text', (node) => {
|
|
7
|
+
const value = node.value;
|
|
8
|
+
if (typeof value === 'string') {
|
|
9
|
+
node.value = replaceMathBracket(value);
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
};
|
|
13
|
+
export const replaceMathBracket = (value) => {
|
|
14
|
+
return value
|
|
15
|
+
.replace(/\[([\s\S]+?)\]/g, (_match, p1) => {
|
|
16
|
+
return `$$${p1}$$`;
|
|
17
|
+
})
|
|
18
|
+
.replace(/\(([\s\S]+?)\)/g, (_match, p1) => {
|
|
19
|
+
return `$${p1}$`;
|
|
20
|
+
});
|
|
21
|
+
};
|
|
22
|
+
export default remarkMathBracket;
|
|
23
|
+
//# sourceMappingURL=remarkMathBracket.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"remarkMathBracket.js","sourceRoot":"","sources":["../../../src/utils/remarkMathBracket.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAEzC;;GAEG;AACH,MAAM,iBAAiB,GAAW,GAAG,EAAE,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE;IACrD,KAAK,CAAC,IAAI,EAAE,MAAM,EAAE,CAAC,IAAS,EAAE,EAAE;QAChC,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;QAEzB,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;YAC9B,IAAI,CAAC,KAAK,GAAG,kBAAkB,CAAC,KAAK,CAAC,CAAC;QACzC,CAAC;IACH,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAAa,EAAE,EAAE;IAClD,OAAO,KAAK;SACT,OAAO,CAAC,iBAAiB,EAAE,CAAC,MAAM,EAAE,EAAE,EAAE,EAAE;QACzC,OAAO,KAAK,EAAE,IAAI,CAAC;IACrB,CAAC,CAAC;SACD,OAAO,CAAC,iBAAiB,EAAE,CAAC,MAAM,EAAE,EAAE,EAAE,EAAE;QACzC,OAAO,IAAI,EAAE,GAAG,CAAC;IACnB,CAAC,CAAC,CAAC;AACP,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
|
package/dist/katex.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import 'katex/dist/katex.min.css';
|