https://github.com/flyeric0212/wx-md
一个基于 Web 的 Markdown 编辑器,专为微信公众号文章排版设计。它能够实时将 Markdown 文本转换为适合微信公众号的富文本格式,解决了微信公众号文章排版困难的问题。
https://github.com/flyeric0212/wx-md
markdown react typescript
Last synced: 2 months ago
JSON representation
一个基于 Web 的 Markdown 编辑器,专为微信公众号文章排版设计。它能够实时将 Markdown 文本转换为适合微信公众号的富文本格式,解决了微信公众号文章排版困难的问题。
- Host: GitHub
- URL: https://github.com/flyeric0212/wx-md
- Owner: flyeric0212
- License: mit
- Created: 2025-03-12T09:06:50.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-03-19T15:04:12.000Z (2 months ago)
- Last Synced: 2025-03-19T15:27:22.909Z (2 months ago)
- Topics: markdown, react, typescript
- Language: TypeScript
- Homepage: https://md.flyeric.top
- Size: 87.9 KB
- Stars: 5
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 微信公众号 Markdown 编辑器
Markdown 文档自动即时渲染为微信图文,让你不再为微信文章排版而发愁!只要你会基本的 Markdown 语法,就能做出一篇样式简洁而又美观大方的微信图文。
[微信公众号Markdown编辑器主页](https://md.flyeric.top)

## 项目简介
本项目是一个基于 Web 的 Markdown 编辑器,专为微信公众号文章排版设计。它能够实时将 Markdown 文本转换为适合微信公众号的富文本格式,解决了微信公众号文章排版困难的问题。
### 为什么选择我们的工具?
- **所见即所得**:左侧编辑,右侧实时预览,让你清楚了解文章最终效果
- **一键复制**:一键复制为微信公众号格式,直接粘贴到公众号后台即可
- **多种预览模式**:支持自适应、手机和宽屏三种预览模式,满足不同需求
- **丰富的样式设置**:支持主题、字体、字号、主题色、代码主题等多种样式设置
- **完全免费**:开源免费,无需注册,无需安装,打开即用## 项目结构
```
md/
├── public/
├── src/
│ ├── components/ # 组件目录
│ ├── pages/ # 页面组件
│ ├── styles/ # 样式文件
│ ├── hooks/ # 自定义钩子
│ ├── store/ # 状态管理
│ ├── utils/ # 工具函数
│ ├── config/ # 配置文件
│ ├── assets/ # 静态资源
│ ├── types/ # TypeScript类型定义
│ ├── contexts/ # React上下文
│ ├── App.tsx # 应用入口组件
│ └── main.tsx # 应用入口文件
├── package.json
└── README.md
```## 功能特性
- [x] **Markdown 基础语法支持**:
- 标题(H1-H6)、段落、引用、列表(有序/无序)
- 粗体、斜体、删除线、链接、图片
- 表格、分割线、代码(行内/块级)
- 代码块语法高亮(支持多种编程语言)- [x] **实时编辑与预览**:
- 左侧编辑,右侧实时预览
- 编辑区和预览区滚动同步
- 支持自适应、手机和宽屏三种预览模式- [x] **样式设置**:
- 支持浅色、深色两种编辑器主题
- 支持多种字体和字号设置
- 支持多种主题色选择
- 支持多种代码高亮主题- [x] **复制功能**:
- 支持复制为微信公众号格式
- 修正HTML结构,确保在微信公众号中正确显示- [ ] **自定义 CSS 样式**:
- 支持自定义CSS样式- [ ] **黑夜模式**:
- 支持浅色、深色两种编辑器主题## 技术栈
- **前端框架**:React 19
- **开发语言**:TypeScript
- **编辑器**:CodeMirror 6 (通过@uiw/react-codemirror)
- **Markdown解析**:Marked
- **代码高亮**:Highlight.js
- **HTML净化**:DOMPurify
- **样式**:CSS/Less
- **路由**:React Router
- **构建工具**:Vite## 安装与运行
### 环境要求
- Node.js 18.0.0 或更高版本
- npm 8.0.0 或更高版本### 安装依赖
```bash
npm install
```### 开发模式运行
```bash
npm run dev
```应用将在 http://localhost:5173 启动(或其他可用端口)。
### 构建生产版本
```bash
npm run build
```构建后的文件将生成在 `dist` 目录中。
### 预览生产版本
```bash
npm run preview
```## 使用指南
### 基本使用
1. 在左侧编辑区输入Markdown格式的文本
2. 右侧会实时显示渲染后的HTML效果
3. 点击顶部工具栏的"复制"按钮可以复制为微信公众号格式
4. 直接粘贴到微信公众号后台编辑器中即可### 样式设置
工具栏提供了多种样式设置选项:
- **主题**:选择编辑器的外观主题(浅色/深色)
- **字体**:选择预览区的字体
- **字号**:选择预览区的字号大小
- **主题色**:选择预览区的主题色
- **代码主题**:选择代码块的高亮主题### 预览模式
工具栏提供了三种预览模式:
- **自适应**:预览区宽度自适应窗口大小
- **手机**:模拟手机屏幕宽度(375px)
- **宽屏**:固定宽度(900px)## 开发指南
### 项目结构说明
- `src/components`:存放可复用的UI组件
- `src/pages`:存放页面级组件
- `src/hooks`:存放自定义React Hooks
- `src/utils`:存放工具函数
- `src/config`:存放配置文件
- `src/contexts`:存放React Context
- `src/store`:存放状态管理相关代码
- `src/styles`:存放全局样式文件
- `src/types`:存放TypeScript类型定义
- `src/assets`:存放静态资源文件### 核心组件
- `MarkdownEditor`:主编辑器组件,负责协调编辑器和预览区
- `Toolbar`:工具栏组件,提供各种设置选项### 核心功能实现
- `renderMarkdown`:Markdown渲染函数,将Markdown文本转换为HTML
- `useCopy`:复制功能Hook,处理复制为微信公众号格式
- `useStore`:状态管理Hook,处理内容和设置的存储
- `ThemeContext`:主题上下文,负责主题的实时应用## 贡献指南
我们欢迎任何形式的贡献,包括但不限于:
- 提交bug报告
- 提交功能请求
- 提交代码修复
- 提交新功能实现
- 改进文档### 贡献步骤
1. Fork本仓库
2. 创建你的特性分支 (`git checkout -b feature/amazing-feature`)
3. 提交你的更改 (`git commit -m 'Add some amazing feature'`)
4. 推送到分支 (`git push origin feature/amazing-feature`)
5. 打开一个Pull Request## 许可证
本项目采用 MIT 许可证。详见 [LICENSE](LICENSE) 文件。
## 联系方式
如有任何问题或建议,请通过以下方式联系我们:
- 提交 [Issue](https://github.com/flyeric0212/wx-md/issues)
- 发送邮件至 [[email protected]](mailto:[email protected])## 致谢
感谢所有为本项目做出贡献的开发者和用户。