ds-markdown 0.0.15-beta.2 → 0.1.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.md +4 -60
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -111,9 +111,11 @@ function App() {
|
|
|
111
111
|
|
|
112
112
|
```tsx
|
|
113
113
|
import DsMarkdown from 'ds-markdown';
|
|
114
|
+
// 如果需要展示公式,则需要引入公式转换插件
|
|
114
115
|
import { katexPlugin } from 'ds-markdown/plugins';
|
|
115
116
|
import 'ds-markdown/style.css';
|
|
116
|
-
|
|
117
|
+
// 如果需要展示公式,则需要引入数学公式样式
|
|
118
|
+
import 'ds-markdown/katex.css';
|
|
117
119
|
|
|
118
120
|
function MathDemo() {
|
|
119
121
|
return (
|
|
@@ -235,7 +237,7 @@ markdownRef.current?.resume(); // 恢复动画
|
|
|
235
237
|
|
|
236
238
|
## 🧮 数学公式使用指南
|
|
237
239
|
|
|
238
|
-
[DEMO](https://stackblitz.com/edit/vitejs-vite-
|
|
240
|
+
[DEMO](https://stackblitz.com/edit/vitejs-vite-z94syu8j?file=src%2FApp.tsx)
|
|
239
241
|
|
|
240
242
|
### 基本语法
|
|
241
243
|
|
|
@@ -499,64 +501,6 @@ function MathStreamingDemo() {
|
|
|
499
501
|
}
|
|
500
502
|
```
|
|
501
503
|
|
|
502
|
-
### 🔄 流式 Markdown 语法处理
|
|
503
|
-
|
|
504
|
-
**核心问题**:流式输出时,不完整的 Markdown 语法会导致渲染错误
|
|
505
|
-
|
|
506
|
-
```tsx
|
|
507
|
-
// 🚨 问题场景
|
|
508
|
-
push('#'); // "# "
|
|
509
|
-
push(' '); // "# "
|
|
510
|
-
push('标题'); // "# 标题"
|
|
511
|
-
push('\n'); // "# 标题\n"
|
|
512
|
-
push('1'); // "# 标题\n1" ← 这里会被误解析为段落
|
|
513
|
-
push('.'); // "# 标题\n1." ← 形成正确的列表
|
|
514
|
-
push(' 项目'); // "# 标题\n1. 项目"
|
|
515
|
-
```
|
|
516
|
-
|
|
517
|
-
**✅ 智能解决方案**:组件内置同步缓冲机制
|
|
518
|
-
|
|
519
|
-
```tsx
|
|
520
|
-
// 组件会智能处理语法边界
|
|
521
|
-
const handleStreamingMarkdown = () => {
|
|
522
|
-
const chunks = ['#', ' ', '使用', '技能', '\n', '1', '.', ' ', '技能1', '\n', '2', '.', ' 技能2'];
|
|
523
|
-
|
|
524
|
-
chunks.forEach((chunk) => {
|
|
525
|
-
markdownRef.current?.push(chunk, 'answer');
|
|
526
|
-
// 无需延迟,组件内部智能缓冲
|
|
527
|
-
});
|
|
528
|
-
};
|
|
529
|
-
|
|
530
|
-
// 🧠 智能处理流程:
|
|
531
|
-
// 1. 实时检测 "# 使用技能\n1" 语法不完整
|
|
532
|
-
// 2. 智能缓冲,等待更多字符
|
|
533
|
-
// 3. 收到 "." 形成 "1." 后立即处理
|
|
534
|
-
// 4. 零延迟,纯同步处理
|
|
535
|
-
```
|
|
536
|
-
|
|
537
|
-
**支持的语法检测**:
|
|
538
|
-
|
|
539
|
-
````typescript
|
|
540
|
-
// ✅ 完整语法 (立即处理)
|
|
541
|
-
'## 标题'; // 完整标题
|
|
542
|
-
'1. 列表项'; // 完整列表项
|
|
543
|
-
'- 项目'; // 完整无序列表
|
|
544
|
-
'> 引用内容'; // 完整引用
|
|
545
|
-
'```javascript'; // 代码块开始
|
|
546
|
-
'```'; // 代码块结束
|
|
547
|
-
'内容以换行结尾\n'; // 换行边界
|
|
548
|
-
'$a + b$'; // 完整数学公式
|
|
549
|
-
'$$\\sum x$$'; // 完整块级数学公式
|
|
550
|
-
|
|
551
|
-
// 🔄 不完整语法 (智能缓冲)
|
|
552
|
-
'##'; // 只有标题符号
|
|
553
|
-
'1'; // 只有数字
|
|
554
|
-
'```java'; // 可能的代码块开始
|
|
555
|
-
'$a +'; // 不完整的数学公式
|
|
556
|
-
````
|
|
557
|
-
|
|
558
|
-
---
|
|
559
|
-
|
|
560
504
|
## 🔧 最佳实践
|
|
561
505
|
|
|
562
506
|
### 1. 性能优化
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ds-markdown",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.0
|
|
4
|
+
"version": "0.1.0",
|
|
5
5
|
"main": "./dist/cjs/index.js",
|
|
6
6
|
"types": "./dist/cjs/index.d.ts",
|
|
7
7
|
"module": "./dist/esm/index.js",
|
|
@@ -125,6 +125,6 @@
|
|
|
125
125
|
"react-markdown"
|
|
126
126
|
],
|
|
127
127
|
"publishConfig": {
|
|
128
|
-
"tag": "
|
|
128
|
+
"tag": "latest"
|
|
129
129
|
}
|
|
130
130
|
}
|