# xb-markdown-editor

**Repository Path**: pythonxueba/xb-markdown-editor

## Basic Information

- **Project Name**: xb-markdown-editor
- **Description**: 功能丰富的左右分页 Markdown 编辑器，支持多种排版样式、纹理背景、代码高亮主题和 AI 生成功能
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-05
- **Last Updated**: 2026-01-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# XB Markdown Editor

<div align="center">

一款功能丰富的左右分页 Markdown 编辑器，支持多种排版样式、纹理背景、代码高亮主题和 AI 生成功能。

![Next.js](https://img.shields.io/badge/Next.js-16.0.10-black?style=flat-square&logo=next.js)
![React](https://img.shields.io/badge/React-19.2.1-blue?style=flat-square&logo=react)
![TypeScript](https://img.shields.io/badge/TypeScript-5.0-blue?style=flat-square&logo=typescript)
![License](https://img.shields.io/badge/License-MIT-green?style=flat-square)

[在线演示](#) · [功能特性](#功能特性) · [快速开始](#快速开始) · [使用指南](#使用指南) · [部署文档](#部署文档)

</div>

## 📖 功能特性

### 核心功能

- ✨ **实时预览** - 左右分屏编辑，实时渲染 Markdown 内容
- 🎨 **12种排版样式** - 支持简约、现代、微信排版等多种风格
- 🖼️ **34种纹理背景** - 多种精美纹理背景可选，美化阅读体验
- 🌈 **20+ 代码高亮主题** - 支持主流代码高亮主题，一键切换
- 🔢 **数学公式支持** - 完整支持 LaTeX 数学公式渲染（KaTeX）
- 🤖 **AI 内容生成** - 集成大语言模型，智能生成和续写内容
- 📋 **一键复制** - 复制渲染后的预览内容（包含样式和纹理）
- 📱 **响应式设计** - 完美适配桌面端和移动端，移动端上下排列

### 编辑功能

- 🔍 **语法高亮** - 代码块自动高亮显示
- 📝 **GFM 支持** - 完整支持 GitHub Flavored Markdown
- 🔗 **快捷链接** - 自动识别链接格式
- 📊 **表格支持** - 支持 Markdown 表格语法，表格背景透明
- ✅ **任务列表** - 支持 Todo 列表格式
- 🎯 **代码块语言** - 自动识别编程语言

### 导出功能

- 📄 **Markdown 导出** - 导出原始 .md 文件
- 🌐 **HTML 导出** - 导出样式完整的 .html 文件，与预览完全一致
- 📋 **富文本复制** - 复制渲染后的预览内容，包含样式、纹理和代码高亮

## 🚀 快速开始

### 环境要求

- Node.js >= 18.0.0
- pnpm >= 8.0.0（推荐）或 npm >= 9.0.0

### 安装步骤

1. **克隆仓库**

```bash
git clone https://gitee.com/pythonxueba/xb-markdown-editor.git
cd xb-markdown-editor
```

2. **安装依赖**

```bash
# 使用 pnpm（推荐）
pnpm install

# 或使用 npm
npm install
```

3. **启动开发服务器**

```bash
pnpm dev
# 或
npm run dev
```

4. **访问应用**

打开浏览器访问 [http://localhost:5000](http://localhost:5000)

## 📖 使用指南

### 基础编辑

1. **左侧编辑区** - 输入 Markdown 内容
2. **右侧预览区** - 实时查看渲染效果
3. **工具栏** - 点击图标快速切换功能

### 样式切换

- **排版样式**：点击顶部工具栏的样式图标，选择适合的排版风格（12种可选）
- **纹理背景**：切换不同的背景纹理（34种精美纹理可选）
- **代码主题**：从 20+ 主流主题中选择代码高亮样式

### 数学公式

支持完整的 LaTeX 数学公式语法：

**行内公式**：`$E = mc^2$`

**块级公式**：
```
$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$
```

### AI 生成

1. 点击 AI 生成按钮（🪄 图标）
2. 选择生成模式（简单、中等、深度、扩写、润色、总结、翻译、优化）
3. 输入提示词
4. 等待 AI 流式生成内容
5. 生成内容会自动插入到编辑器

### 复制功能

点击复制按钮（📋 图标），会将渲染后的预览内容（包含样式、纹理、代码高亮）复制到剪贴板，可直接粘贴到支持富文本的编辑器中。

### 导出功能

- **下载 Markdown**：导出原始 .md 文件，可继续编辑
- **下载 HTML**：导出样式完整的 .html 文件，可在浏览器中直接查看

## 🛠️ 技术栈

### 核心框架

- **Next.js 16** - React 框架（App Router）
- **React 19** - UI 库
- **TypeScript** - 类型安全
- **Tailwind CSS 4** - 样式框架

### Markdown 渲染

- **react-markdown** - Markdown 解析
- **remark-gfm** - GitHub Flavored Markdown 支持
- **remark-math** - 数学公式解析
- **rehype-highlight** - 代码高亮
- **rehype-katex** - 数学公式渲染

### 其他依赖

- **highlight.js** - 代码高亮引擎（20+ 主题）
- **katex** - 数学公式渲染引擎
- **lucide-react** - 图标库
- **coze-coding-dev-sdk** - AI 集成

## 🎨 界面设计

### 设计原则

- **深色工具栏** - 顶部工具栏采用深色背景，白色图标，清晰易用
- **纯白编辑区** - 编辑器背景纯白，文字黑色，提供最佳编辑体验
- **透明表格** - 表格背景透明，融入整体设计
- **紧凑UI** - 工具栏元素小巧精致，最大化编辑区域
- **响应式布局** - PC端左右分栏，移动端上下排列，完美适配各种屏幕

### 排版样式

支持 12 种精心设计的排版样式：

1. **默认简约** - 简洁大方，适合日常写作
2. **微信公众号** - 专为微信文章排版优化
3. **优雅衬线** - 优雅衬线字体，适合文学创作
4. **代码极客** - 等宽字体，适合技术文档
5. **清新薄荷** - 清新绿色调，轻盈舒适
6. **优雅紫韵** - 优雅紫色调，高贵典雅
7. **科技蓝调** - 科技蓝色调，专业现代
8. **深空灰调** - 深色灰色调，沉稳大气
9. **文艺青绿** - 文艺青绿色，清新雅致
10. **温暖橙调** - 温暖橙色调，活力满满
11. **商务蓝调** - 商务蓝色调，专业严谨
12. **精致阅读** - 精致调色，适合长时间阅读

### 纹理背景

提供 34 种精美纹理背景，包括：

- 基础纹理：精细点阵、细方格、斜线纹理、菱形格、波点
- 自然主题：星空、宇宙极光、海洋波浪、森林绿意、落日余晖
- 数字风格：数字矩阵、霓虹灯效、数据流、代码注释
- 艺术风格：水墨山水、冰晶雪花、梦幻气泡、樱花飘落
- 复古风格：复古唱片、金色光晕、像素艺术
- 简约风格：极简网格、渐变光束、抽象线条

## 📦 构建和部署

### 本地构建

```bash
# 构建生产版本
pnpm build

# 启动生产服务器
pnpm start
```

### 部署到 Vercel

1. 将代码推送到 GitHub/Gitee
2. 访问 [Vercel](https://vercel.com)
3. 导入项目仓库
4. Vercel 会自动识别 Next.js 项目并部署

### 部署到其他平台

#### Docker 部署

```dockerfile
FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 5000
CMD ["npm", "start"]
```

构建并运行：
```bash
docker build -t xb-markdown-editor .
docker run -p 5000:5000 xb-markdown-editor
```

#### Node.js 服务器部署

1. 构建项目：`pnpm build`
2. 上传 `next.config.ts`、`package.json`、`package-lock.json`、`.next` 目录到服务器
3. 安装依赖：`pnpm install --production`
4. 启动服务：`pnpm start`

## 📁 项目结构

```
xb-markdown-editor/
├── src/
│   ├── app/
│   │   ├── api/
│   │   │   └── ai/
│   │   │       └── generate/
│   │   │           └── route.ts      # AI 生成 API
│   │   ├── globals.css               # 全局样式
│   │   ├── layout.tsx                # 根布局
│   │   └── page.tsx                  # 主页面（编辑器核心）
├── .coze                             # 项目配置
├── .cozeproj/                        # 构建脚本
├── package.json                      # 项目依赖
├── tsconfig.json                     # TypeScript 配置
├── tailwind.config.ts                # Tailwind 配置
└── README.md                         # 项目文档
```

## 🌟 特色功能详解

### 完美的复制功能

使用 Selection API 的 `selectNodeContents` 方法，从实际渲染的 DOM 元素获取计算样式，确保复制的内容与预览完全一致，包括：
- 文字颜色和大小
- 背景纹理
- 代码高亮
- 表格样式
- 数学公式

### 流式 AI 生成

使用 SSE (Server-Sent Events) 协议实现流式响应，提供流畅的 AI 内容生成体验：
- 支持 8 种生成模式
- 实时显示生成进度
- 生成内容自动插入编辑器
- 支持错误重试

### 响应式设计

- **桌面端**：左右分栏，编辑器和预览并排显示
- **移动端**：上下排列，编辑器和预览可切换查看
- **工具栏自适应**：图标大小和文字大小根据屏幕尺寸自动调整

### 数学公式支持

完整的 LaTeX 数学公式支持：
- 行内公式：`$ ... $`
- 块级公式：`$$ ... $$`
- 支持所有常用数学符号和公式

## 🤝 贡献指南

欢迎贡献代码、报告问题或提出建议！

1. Fork 本仓库
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 开启 Pull Request

## 📝 更新日志

### v1.0.0 (2025-01-XX)

- ✨ 初始版本发布
- ✅ 实现基础 Markdown 编辑功能
- ✅ 支持 12 种排版样式
- ✅ 支持 34 种纹理背景
- ✅ 支持 20+ 代码高亮主题
- ✅ 集成 AI 内容生成功能
- ✅ 实现一键复制和导出功能
- ✅ 完美响应式设计

## 📄 许可证

本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情

## 🙏 致谢

- [Next.js](https://nextjs.org/) - React 框架
- [React](https://reactjs.org/) - UI 库
- [react-markdown](https://github.com/remarkjs/react-markdown) - Markdown 解析器
- [highlight.js](https://highlightjs.org/) - 代码高亮
- [KaTeX](https://katex.org/) - 数学公式渲染
- [Tailwind CSS](https://tailwindcss.com/) - CSS 框架

## 📮 联系方式

- 项目地址：[https://gitee.com/pythonxueba/xb-markdown-editor](https://gitee.com/pythonxueba/xb-markdown-editor)
- 问题反馈：[Issues](https://gitee.com/pythonxueba/xb-markdown-editor/issues)

---

<div align="center">

如果这个项目对你有帮助，请给个 ⭐️ Star 支持一下！

Made with ❤️ by XB

</div>