Markdown 文档自动即时渲染为微信图文,让你不再为微信文章排版而发愁!只要你会基本的 Markdown 语法,就能做出一篇样式简洁而又美观大方的微信图文。

微信公众号Markdown编辑器主页

image-20250312下午55610311

本项目是一个基于 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

• Markdown 基础语法支持:

  • 标题(H1-H6)、段落、引用、列表(有序/无序)
  • 粗体、斜体、删除线、链接、图片
  • 表格、分割线、代码(行内/块级)
  • 代码块语法高亮(支持多种编程语言)

• 实时编辑与预览:

  • 左侧编辑,右侧实时预览
  • 编辑区和预览区滚动同步
  • 支持自适应、手机和宽屏三种预览模式

• 样式设置:

  • 支持浅色、深色两种编辑器主题
  • 支持多种字体和字号设置
  • 支持多种主题色选择
  • 支持多种代码高亮主题

• 复制功能:

  • 支持复制为微信公众号格式
  • 修正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 或更高版本

npm install

npm run dev

应用将在 http://localhost:5173 启动(或其他可用端口)。

npm run build

构建后的文件将生成在 dist 目录中。

npm run preview

docker build -t your-repo/wx-md:latest .

请先确保已登录目标镜像仓库,并将 your-repo/wx-md:latest 替换为你的仓库地址。

常用平台组合:

• 生产环境推荐:linux/amd64,linux/arm64
• 更广泛兼容(含树莓派、老设备):linux/amd64,linux/arm64,linux/arm/v7

示例命令:

docker buildx build --platform linux/amd64,linux/arm64 -t your-repo/wx-md:latest --push .

或

docker buildx build --platform linux/amd64,linux/arm64,linux/arm/v7 -t your-repo/wx-md:latest --push .

cd deploy
docker-compose build
docker-compose up -d

浏览器访问:

http://localhost

1. 在左侧编辑区输入Markdown格式的文本
2. 右侧会实时显示渲染后的HTML效果
3. 点击顶部工具栏的"复制"按钮可以复制为微信公众号格式
4. 直接粘贴到微信公众号后台编辑器中即可

工具栏提供了多种样式设置选项:

• 主题:选择编辑器的外观主题(浅色/深色)
• 字体:选择预览区的字体
• 字号:选择预览区的字号大小
• 主题色:选择预览区的主题色
• 代码主题:选择代码块的高亮主题
• 关于:展示 Github 源码

工具栏提供了三种预览模式:

• 自适应:预览区宽度自适应窗口大小
• 手机:模拟手机屏幕宽度(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 文件。

如有任何问题或建议,请通过以下方式联系我们:

• 提交 Issue
• 发送邮件至 bo.liang0212@outlook.com

感谢所有为本项目做出贡献的开发者和用户。