188 lines
3.8 KiB
Markdown
188 lines
3.8 KiB
Markdown
# Markdown 节点渲染集成说明
|
||
|
||
## 概述
|
||
|
||
这个集成方案为你的 Mind Elixir 思维导图项目添加了 markdown 节点渲染能力，支持：
|
||
|
||
- ✅ **表格渲染** - 完整的 markdown 表格支持
|
||
- ✅ **代码高亮** - 代码块和行内代码
|
||
- ✅ **文本格式** - 粗体、斜体、标题等
|
||
- ✅ **列表** - 有序和无序列表
|
||
- ✅ **链接** - 自动链接渲染
|
||
- ✅ **智能检测** - 自动识别 markdown 语法
|
||
|
||
## 文件结构
|
||
|
||
```
|
||
frontend/src/
|
||
├── utils/
|
||
│ └── markdownRenderer.js # 核心渲染器
|
||
├── components/
|
||
│ ├── MindMap.vue # 主思维导图组件（已集成）
|
||
│ └── MarkdownTest.vue # 测试组件
|
||
└── ...
|
||
```
|
||
|
||
## 使用方法
|
||
|
||
### 1. 在节点中使用 markdown
|
||
|
||
现在你可以在思维导图的节点内容中直接使用 markdown 语法：
|
||
|
||
```markdown
|
||
# 产品价格表
|
||
|
||
| 产品 | 价格 | 库存 |
|
||
|------|------|------|
|
||
| 苹果 | 4元 | 100个 |
|
||
| 香蕉 | 2元 | 50个 |
|
||
|
||
## 技术栈
|
||
|
||
- **前端**: Vue.js 3
|
||
- **后端**: Django
|
||
- **数据库**: PostgreSQL
|
||
|
||
## 代码示例
|
||
|
||
\`\`\`javascript
|
||
function hello() {
|
||
console.log('Hello World!');
|
||
}
|
||
\`\`\`
|
||
```
|
||
|
||
### 2. 测试功能
|
||
|
||
访问 `MarkdownTest.vue` 组件来测试 markdown 渲染功能：
|
||
|
||
```vue
|
||
<template>
|
||
<MarkdownTest />
|
||
</template>
|
||
|
||
<script setup>
|
||
import MarkdownTest from './components/MarkdownTest.vue';
|
||
</script>
|
||
```
|
||
|
||
### 3. 在现有节点中启用
|
||
|
||
系统会自动检测节点内容是否包含 markdown 语法，如果包含，会自动使用 markdown 渲染器。
|
||
|
||
## 核心功能
|
||
|
||
### 智能渲染
|
||
|
||
```javascript
|
||
import { smartRenderNodeContent } from '../utils/markdownRenderer.js';
|
||
|
||
// 自动检测并渲染
|
||
smartRenderNodeContent(nodeElement, content);
|
||
```
|
||
|
||
### 手动渲染
|
||
|
||
```javascript
|
||
import { renderMarkdownToHTML } from '../utils/markdownRenderer.js';
|
||
|
||
// 直接渲染为 HTML
|
||
const html = renderMarkdownToHTML(markdownContent);
|
||
```
|
||
|
||
### 语法检测
|
||
|
||
```javascript
|
||
import { hasMarkdownSyntax } from '../utils/markdownRenderer.js';
|
||
|
||
// 检测是否包含 markdown 语法
|
||
if (hasMarkdownSyntax(content)) {
|
||
// 使用 markdown 渲染
|
||
}
|
||
```
|
||
|
||
## 支持的 Markdown 语法
|
||
|
||
### 表格
|
||
```markdown
|
||
| 列1 | 列2 | 列3 |
|
||
|-----|-----|-----|
|
||
| 数据1 | 数据2 | 数据3 |
|
||
```
|
||
|
||
### 代码块
|
||
```markdown
|
||
\`\`\`javascript
|
||
function test() {
|
||
console.log('Hello');
|
||
}
|
||
\`\`\`
|
||
```
|
||
|
||
### 行内代码
|
||
```markdown
|
||
使用 \`console.log()\` 输出信息
|
||
```
|
||
|
||
### 文本格式
|
||
```markdown
|
||
**粗体文本**
|
||
*斜体文本*
|
||
```
|
||
|
||
### 列表
|
||
```markdown
|
||
- 无序列表项1
|
||
- 无序列表项2
|
||
|
||
1. 有序列表项1
|
||
2. 有序列表项2
|
||
```
|
||
|
||
### 链接
|
||
```markdown
|
||
[链接文本](https://example.com)
|
||
```
|
||
|
||
## 样式定制
|
||
|
||
渲染器会自动添加 CSS 样式，你也可以通过以下类名进行自定义：
|
||
|
||
- `.markdown-content` - 主容器
|
||
- `.markdown-table` - 表格样式
|
||
- `.markdown-code` - 代码块样式
|
||
- `.markdown-math` - 数学公式样式
|
||
|
||
## 注意事项
|
||
|
||
1. **性能**: 大量 markdown 内容可能影响渲染性能
|
||
2. **安全性**: 渲染器允许 HTML，请确保内容来源可信
|
||
3. **兼容性**: 与 Mind Elixir 的拖拽、编辑功能完全兼容
|
||
|
||
## 故障排除
|
||
|
||
### 渲染失败
|
||
- 检查 markdown 语法是否正确
|
||
- 查看浏览器控制台错误信息
|
||
- 使用 `MarkdownTest.vue` 组件测试
|
||
|
||
### 样式问题
|
||
- 检查 CSS 样式是否被覆盖
|
||
- 确保 `markdown-node-styles` 样式已加载
|
||
|
||
### 性能问题
|
||
- 避免在单个节点中放置过多内容
|
||
- 考虑将复杂内容拆分为多个子节点
|
||
|
||
## 扩展功能
|
||
|
||
如果需要更多功能，可以扩展 `markdownRenderer.js`：
|
||
|
||
- 数学公式支持（KaTeX）
|
||
- 图表支持（Mermaid）
|
||
- 更多 markdown 扩展语法
|
||
|
||
## 总结
|
||
|
||
这个集成方案让你可以在保持现有 Mind Elixir 功能的同时，享受强大的 markdown 渲染能力。特别是表格渲染功能，让思维导图可以展示更丰富的数据结构。
|