3b375a22d8
- 修复行号只能显示80%内容的问题
- 使用动态高度计算确保100%内容覆盖
- 实现精确的行号与内容同步滚动
- 优化行号容器的定位和样式
技术细节：
- 使用Math.max(21, content.split('\n').length * 21)动态计算高度
- 确保每行内容都有对应的行号显示
- 使用CSS transform实现平滑滚动同步
测试验证：
- 空文件正确显示1行号
- 长文件显示所有行号无遗漏
- 滚动时行号与内容精确对齐
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Markdown编辑器
一个基于前后端分离架构的Markdown编辑器，支持实时预览、文件管理和正则表达式批量操作。
技术栈
前端
- React 18 + TypeScript + Vite
- react-markdown - Markdown渲染
- react-syntax-highlighter - 代码高亮
- KaTeX - 数学公式渲染
- SplitPane - 可调整的分割布局
后端
- Python Flask
- Markdown - Markdown解析
- Flask-CORS - 跨域支持
- 正则表达式 - 批量文本操作
功能特性
✅ 已实现功能
- Markdown解析器
- 实时预览功能
- 文件操作（创建、读取、更新、删除）
- 正则表达式批量操作
- 代码高亮和数学公式支持
- 文件浏览器
- 键盘快捷键支持
- 自动保存到本地存储
🎯 核心功能
-
Markdown编辑
- 实时语法高亮
- 快捷键支持（Ctrl+B粗体，Ctrl+I斜体等）
- 工具栏快捷操作
-
实时预览
- 同步滚动
- 目录生成
- 代码块高亮
- 数学公式渲染
- 表格支持
-
文件管理
- 文件浏览
- 文件创建/编辑/删除
- 目录导航
- 文件搜索
-
正则表达式工具
- 常用模式预设
- 实时匹配测试
- 批量替换
- 捕获组支持
- 操作历史记录
快速开始
安装依赖
- 安装后端依赖
cd backend
pip install -r requirements.txt
- 安装前端依赖
cd frontend
npm install
启动服务
- 启动后端服务
cd backend
python app.py
# 或使用环境变量设置端口和调试模式
PORT=5000 DEBUG=true python app.py
- 启动前端服务
cd frontend
npm run dev
- 访问应用
打开浏览器访问
http://localhost:3000
API文档
健康检查
GET /api/health
Markdown解析
POST /api/parse
{
"content": "# Hello World"
}
文件操作
GET /api/files # 获取文件列表
GET /api/files/read # 读取文件内容
POST /api/files/write # 写入文件内容
DELETE /api/files/delete # 删除文件
GET /api/files/download # 下载文件
正则表达式操作
POST /api/regex/replace # 替换文本
POST /api/regex/extract # 提取匹配项
项目结构
markdown-editor/
├── backend/
│ ├── app/
│ │ ├── __init__.py # Flask应用初始化
│ │ └── routes.py # API路由定义
│ ├── utils/
│ │ ├── __init__.py
│ │ ├── markdown_parser.py # Markdown解析器
│ │ ├── file_manager.py # 文件管理器
│ │ └── regex_processor.py # 正则表达式处理器
│ ├── app.py # 应用入口
│ └── requirements.txt # Python依赖
├── frontend/
│ ├── src/
│ │ ├── components/ # React组件
│ │ │ ├── MarkdownEditor.tsx
│ │ │ ├── EditorPanel.tsx
│ │ │ ├── PreviewPanel.tsx
│ │ │ ├── FileExplorer.tsx
│ │ │ ├── Toolbar.tsx
│ │ │ └── RegexPanel.tsx
│ │ ├── utils/ # 工具函数
│ │ │ ├── api.ts
│ │ │ └── markdown.ts
│ │ ├── types/ # TypeScript类型定义
│ │ └── App.tsx
│ ├── package.json
│ └── vite.config.ts
└── README.md
使用说明
基本操作
- 新建文件: Ctrl+N 或点击工具栏的"新建"按钮
- 保存文件: Ctrl+S 或点击工具栏的"保存"按钮
- 切换文件浏览器: 点击工具栏的"文件"按钮
- 打开正则表达式工具: Ctrl+Shift+F
Markdown语法支持
- 标题:
# 一级标题,## 二级标题 - 粗体:
**粗体文本** - 斜体:
*斜体文本* - 链接:
[链接文本](url) - 图片:
 - 代码块:
```语言 代码 ``` - 表格: 使用
|创建表格 - 数学公式: 行内
$公式$或块级$$公式$$
文件操作
- 在文件浏览器中点击文件打开
- 右键文件进行重命名或删除
- 使用面包屑导航目录结构
- 创建新的Markdown文件和目录
正则表达式使用
- 选择常用模式或输入自定义正则
- 设置替换文本和标志
- 点击"测试"查看匹配结果
- 点击"应用"执行替换操作
开发指南
添加新的Markdown扩展
编辑 backend/utils/markdown_parser.py 中的 MarkdownParser 类，添加新的扩展支持。
自定义主题
修改 frontend/src/index.css 中的样式变量，可以自定义编辑器的外观。
扩展API
在 backend/app/routes.py 中添加新的路由，并在前端 frontend/src/utils/api.ts 中添加对应的API调用。
技术细节
实时预览实现
使用防抖(debounce)技术，300ms延迟更新预览，避免频繁计算。
文件系统安全
- 所有文件操作限制在工作目录内
- 防止路径遍历攻击
- 自动创建必要的目录结构
性能优化
- 正则表达式预编译缓存
- 组件懒加载
- 防抖处理用户输入
许可证
MIT License