ds-markdown 0.0.14-beta.1 → 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 +241 -80
- package/README.ja.md +256 -103
- package/README.ko.md +17 -0
- package/README.md +200 -39
- 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 +7 -4
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
|
|
|
@@ -105,6 +89,8 @@ pnpm add ds-markdown
|
|
|
105
89
|
|
|
106
90
|
### 基础用法
|
|
107
91
|
|
|
92
|
+
[DEMO](https://stackblitz.com/edit/vitejs-vite-z94syu8j?file=src%2FApp.tsx)
|
|
93
|
+
|
|
108
94
|
```tsx
|
|
109
95
|
import DsMarkdown from 'ds-markdown';
|
|
110
96
|
import 'ds-markdown/style.css';
|
|
@@ -118,6 +104,22 @@ function App() {
|
|
|
118
104
|
}
|
|
119
105
|
```
|
|
120
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
|
+
|
|
121
123
|
### AI 对话场景
|
|
122
124
|
|
|
123
125
|
```tsx
|
|
@@ -174,27 +176,116 @@ React 19 带来了许多激动人心的新特性:
|
|
|
174
176
|
| `timerType` | `'setTimeout'` \| `'requestAnimationFrame'` | 定时器类型 | 当前默认值是`setTimeout`,后期会改为`requestAnimationFrame` |
|
|
175
177
|
| `answerType` | `'thinking'` \| `'answer'` | 内容类型 (影响样式主题) | `'answer'` |
|
|
176
178
|
| `theme` | `'light'` \| `'dark'` | 主题类型 | `'light'` |
|
|
179
|
+
| `math` | [IMarkdownMath ](#IMarkdownMath) | 数学公式配置 | `{ isOpen: false, splitSymbol: 'dollar' }` |
|
|
177
180
|
| `onEnd` | `(data: EndData) => void` | 打字结束回调 | - |
|
|
178
181
|
| `onStart` | `(data: StartData) => void` | 打字开始回调 | - |
|
|
179
182
|
| `onTypedChar` | `(data: CharData) => void` | 每字符打字回调 | - |
|
|
180
183
|
|
|
181
|
-
###
|
|
184
|
+
### IMarkdownMath
|
|
182
185
|
|
|
183
|
-
|
|
184
|
-
|
|
186
|
+
| 属性 | 类型 | 说明 | 默认值 |
|
|
187
|
+
| ------------- | ------------------------- | -------------------- | ---------- |
|
|
188
|
+
| `isOpen` | `boolean` | 是否开启数学公式渲染 | `false` |
|
|
189
|
+
| `splitSymbol` | `'dollar'` \| `'bracket'` | 数学公式分隔符类型 | `'dollar'` |
|
|
185
190
|
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
191
|
+
**分隔符说明:**
|
|
192
|
+
|
|
193
|
+
- `'dollar'`:使用 `$...$` 和 `$$...$$` 语法
|
|
194
|
+
- `'bracket'`:使用 `\(...\)` 和 `\[...\]` 语法
|
|
195
|
+
|
|
196
|
+
### 命令式 API (推荐流式场景)
|
|
192
197
|
|
|
193
198
|
| 方法 | 参数 | 说明 |
|
|
194
199
|
| ----------------- | ------------------------------------------- | ------------------ |
|
|
195
200
|
| `push` | `(content: string, answerType: AnswerType)` | 添加内容并开始打字 |
|
|
196
201
|
| `clear` | - | 清空所有内容和状态 |
|
|
197
202
|
| `triggerWholeEnd` | - | 手动触发完成回调 |
|
|
203
|
+
| `stop` | - | 暂停打字动画 |
|
|
204
|
+
| `resume` | - | 恢复打字动画 |
|
|
205
|
+
|
|
206
|
+
**用法示例:**
|
|
207
|
+
|
|
208
|
+
```tsx
|
|
209
|
+
markdownRef.current?.stop(); // 暂停动画
|
|
210
|
+
markdownRef.current?.resume(); // 恢复动画
|
|
211
|
+
```
|
|
212
|
+
|
|
213
|
+
---
|
|
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
|
+
```
|
|
198
289
|
|
|
199
290
|
---
|
|
200
291
|
|
|
@@ -309,6 +400,43 @@ function StreamingChat() {
|
|
|
309
400
|
const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
|
|
310
401
|
````
|
|
311
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
|
+
|
|
312
440
|
### 🔄 流式 Markdown 语法处理
|
|
313
441
|
|
|
314
442
|
**核心问题**:流式输出时,不完整的 Markdown 语法会导致渲染错误
|
|
@@ -355,11 +483,14 @@ const handleStreamingMarkdown = () => {
|
|
|
355
483
|
'```javascript'; // 代码块开始
|
|
356
484
|
'```'; // 代码块结束
|
|
357
485
|
'内容以换行结尾\n'; // 换行边界
|
|
486
|
+
'$a + b$'; // 完整数学公式
|
|
487
|
+
'$$\\sum x$$'; // 完整块级数学公式
|
|
358
488
|
|
|
359
489
|
// 🔄 不完整语法 (智能缓冲)
|
|
360
490
|
'##'; // 只有标题符号
|
|
361
491
|
'1'; // 只有数字
|
|
362
492
|
'```java'; // 可能的代码块开始
|
|
493
|
+
'$a +'; // 不完整的数学公式
|
|
363
494
|
````
|
|
364
495
|
|
|
365
496
|
---
|
|
@@ -393,7 +524,22 @@ const [content, setContent] = useState('');
|
|
|
393
524
|
// 每次更新都会重新解析整个内容
|
|
394
525
|
```
|
|
395
526
|
|
|
396
|
-
### 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. 类型安全
|
|
397
543
|
|
|
398
544
|
```tsx
|
|
399
545
|
import { MarkdownCMDRef } from 'ds-markdown';
|
|
@@ -402,7 +548,7 @@ const ref = useRef<MarkdownCMDRef>(null);
|
|
|
402
548
|
// 完整的 TypeScript 类型提示
|
|
403
549
|
```
|
|
404
550
|
|
|
405
|
-
###
|
|
551
|
+
### 5. 样式定制
|
|
406
552
|
|
|
407
553
|
```css
|
|
408
554
|
/* 思考区域样式 */
|
|
@@ -442,6 +588,21 @@ const ref = useRef<MarkdownCMDRef>(null);
|
|
|
442
588
|
padding: 8px 12px;
|
|
443
589
|
text-align: left;
|
|
444
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
|
+
}
|
|
445
606
|
```
|
|
446
607
|
|
|
447
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"}
|