3.8 KiB

Raw Blame History

Markdown 节点渲染集成说明

概述

这个集成方案为你的 Mind Elixir 思维导图项目添加了 markdown 节点渲染能力，支持：

✅ 表格渲染 - 完整的 markdown 表格支持
✅ 代码高亮 - 代码块和行内代码
✅ 文本格式 - 粗体、斜体、标题等
✅ 列表 - 有序和无序列表
✅ 链接 - 自动链接渲染
✅ 智能检测 - 自动识别 markdown 语法

文件结构

frontend/src/
├── utils/
│   └── markdownRenderer.js    # 核心渲染器
├── components/
│   ├── MindMap.vue           # 主思维导图组件（已集成）
│   └── MarkdownTest.vue      # 测试组件
└── ...

使用方法

1. 在节点中使用 markdown

现在你可以在思维导图的节点内容中直接使用 markdown 语法：

# 产品价格表

| 产品 | 价格 | 库存 |
|------|------|------|
| 苹果 | 4元 | 100个 |
| 香蕉 | 2元 | 50个 |

## 技术栈

- **前端**: Vue.js 3
- **后端**: Django
- **数据库**: PostgreSQL

## 代码示例

\`\`\`javascript
function hello() {
  console.log('Hello World!');
}
\`\`\`

2. 测试功能

访问 MarkdownTest.vue 组件来测试 markdown 渲染功能：

<template>
  <MarkdownTest />
</template>

<script setup>
import MarkdownTest from './components/MarkdownTest.vue';
</script>

3. 在现有节点中启用

系统会自动检测节点内容是否包含 markdown 语法，如果包含，会自动使用 markdown 渲染器。

核心功能

智能渲染

import { smartRenderNodeContent } from '../utils/markdownRenderer.js';

// 自动检测并渲染
smartRenderNodeContent(nodeElement, content);

手动渲染

import { renderMarkdownToHTML } from '../utils/markdownRenderer.js';

// 直接渲染为 HTML
const html = renderMarkdownToHTML(markdownContent);

语法检测

import { hasMarkdownSyntax } from '../utils/markdownRenderer.js';

// 检测是否包含 markdown 语法
if (hasMarkdownSyntax(content)) {
  // 使用 markdown 渲染
}

支持的 Markdown 语法

表格

| 列1 | 列2 | 列3 |
|-----|-----|-----|
| 数据1 | 数据2 | 数据3 |

代码块

\`\`\`javascript
function test() {
  console.log('Hello');
}
\`\`\`

行内代码

使用 \`console.log()\` 输出信息

文本格式

**粗体文本**
*斜体文本*

列表

- 无序列表项1
- 无序列表项2

1. 有序列表项1
2. 有序列表项2

链接

[链接文本](https://example.com)

样式定制

渲染器会自动添加 CSS 样式，你也可以通过以下类名进行自定义：

.markdown-content - 主容器
.markdown-table - 表格样式
.markdown-code - 代码块样式
.markdown-math - 数学公式样式

注意事项

性能: 大量 markdown 内容可能影响渲染性能
安全性: 渲染器允许 HTML，请确保内容来源可信
兼容性: 与 Mind Elixir 的拖拽、编辑功能完全兼容

故障排除

渲染失败

检查 markdown 语法是否正确
查看浏览器控制台错误信息
使用 MarkdownTest.vue 组件测试

样式问题

检查 CSS 样式是否被覆盖
确保 markdown-node-styles 样式已加载

性能问题

避免在单个节点中放置过多内容
考虑将复杂内容拆分为多个子节点

扩展功能

如果需要更多功能，可以扩展 markdownRenderer.js：

数学公式支持（KaTeX）
图表支持（Mermaid）
更多 markdown 扩展语法

总结

这个集成方案让你可以在保持现有 Mind Elixir 功能的同时，享受强大的 markdown 渲染能力。特别是表格渲染功能，让思维导图可以展示更丰富的数据结构。

3.8 KiB Raw Blame History Unescape Escape