{"id":26512953,"url":"https://github.com/flyeric0212/wx-md","last_synced_at":"2026-03-02T00:31:50.096Z","repository":{"id":282012920,"uuid":"947168690","full_name":"flyeric0212/wx-md","owner":"flyeric0212","description":"一个基于 Web 的 Markdown 编辑器，专为微信公众号文章排版设计。它能够实时将 Markdown 文本转换为适合微信公众号的富文本格式，解决了微信公众号文章排版困难的问题。","archived":false,"fork":false,"pushed_at":"2025-06-18T10:50:48.000Z","size":97,"stargazers_count":34,"open_issues_count":1,"forks_count":15,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-18T11:46:56.591Z","etag":null,"topics":["markdown","react","typescript"],"latest_commit_sha":null,"homepage":"https://md.flyeric.top","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/flyeric0212.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-03-12T09:06:50.000Z","updated_at":"2025-06-18T10:50:51.000Z","dependencies_parsed_at":"2025-06-18T11:39:03.973Z","dependency_job_id":null,"html_url":"https://github.com/flyeric0212/wx-md","commit_stats":null,"previous_names":["flyeric0212/wx-md"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/flyeric0212/wx-md","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flyeric0212%2Fwx-md","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flyeric0212%2Fwx-md/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flyeric0212%2Fwx-md/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flyeric0212%2Fwx-md/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/flyeric0212","download_url":"https://codeload.github.com/flyeric0212/wx-md/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flyeric0212%2Fwx-md/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29988044,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-01T22:42:38.399Z","status":"ssl_error","status_checked_at":"2026-03-01T22:41:51.863Z","response_time":124,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["markdown","react","typescript"],"created_at":"2025-03-21T04:19:11.696Z","updated_at":"2026-03-02T00:31:50.044Z","avatar_url":"https://github.com/flyeric0212.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# 微信公众号 Markdown 编辑器\n\nMarkdown 文档自动即时渲染为微信图文，让你不再为微信文章排版而发愁！只要你会基本的 Markdown 语法，就能做出一篇样式简洁而又美观大方的微信图文。\n\n[微信公众号Markdown编辑器主页](https://md.flyeric.top)\n\n![image-20250312下午55610311](https://pic-bed-1256249917.cos.ap-chengdu.myqcloud.com/uPic/image-20250312%E4%B8%8B%E5%8D%8855610311.png)\n\n## 项目简介\n\n本项目是一个基于 Web 的 Markdown 编辑器，专为微信公众号文章排版设计。它能够实时将 Markdown 文本转换为适合微信公众号的富文本格式，解决了微信公众号文章排版困难的问题。\n\n### 为什么选择我们的工具？\n\n- **所见即所得**：左侧编辑，右侧实时预览，让你清楚了解文章最终效果\n- **一键复制**：一键复制为微信公众号格式，直接粘贴到公众号后台即可\n- **多种预览模式**：支持自适应、手机和宽屏三种预览模式，满足不同需求\n- **丰富的样式设置**：支持主题、字体、字号、主题色、代码主题等多种样式设置\n- **完全免费**：开源免费，无需注册，无需安装，打开即用\n\n## 项目结构\n\n```\nmd/\n├── public/\n├── src/\n│   ├── components/     # 组件目录\n│   ├── pages/          # 页面组件\n│   ├── styles/         # 样式文件\n│   ├── hooks/          # 自定义钩子\n│   ├── store/          # 状态管理\n│   ├── utils/          # 工具函数\n│   ├── config/         # 配置文件\n│   ├── assets/         # 静态资源\n│   ├── types/          # TypeScript类型定义\n│   ├── contexts/       # React上下文\n│   ├── App.tsx         # 应用入口组件\n│   └── main.tsx        # 应用入口文件\n├── package.json\n└── README.md\n```\n\n## 功能特性\n\n- [x] **Markdown 基础语法支持**：\n  - 标题（H1-H6）、段落、引用、列表（有序/无序）\n  - 粗体、斜体、删除线、链接、图片\n  - 表格、分割线、代码（行内/块级）\n  - 代码块语法高亮（支持多种编程语言）\n\n- [x] **实时编辑与预览**：\n  - 左侧编辑，右侧实时预览\n  - 编辑区和预览区滚动同步\n  - 支持自适应、手机和宽屏三种预览模式\n\n- [x] **样式设置**：\n  - 支持浅色、深色两种编辑器主题\n  - 支持多种字体和字号设置\n  - 支持多种主题色选择\n  - 支持多种代码高亮主题\n\n- [x] **复制功能**：\n  - 支持复制为微信公众号格式\n  - 修正HTML结构，确保在微信公众号中正确显示\n\n- [ ] **自定义 CSS 样式**：\n  - 支持自定义CSS样式\n\n- [ ] **黑夜模式**：\n  - 支持浅色、深色两种编辑器主题\n\n## 技术栈\n\n- **前端框架**：React 19\n- **开发语言**：TypeScript\n- **编辑器**：CodeMirror 6 (通过@uiw/react-codemirror)\n- **Markdown解析**：Marked\n- **代码高亮**：Highlight.js\n- **HTML净化**：DOMPurify\n- **样式**：CSS/Less\n- **路由**：React Router\n- **构建工具**：Vite\n\n## 安装与运行\n\n### 环境要求\n\n- Node.js 18.0.0 或更高版本\n- npm 8.0.0 或更高版本\n\n### 安装依赖\n\n```bash\nnpm install\n```\n\n### 开发模式运行\n\n```bash\nnpm run dev\n```\n\n应用将在 http://localhost:5173 启动（或其他可用端口）。\n\n### 构建生产版本\n\n```bash\nnpm run build\n```\n\n构建后的文件将生成在 `dist` 目录中。\n\n### 预览生产版本\n\n```bash\nnpm run preview\n```\n\n## 使用指南\n\n### 基本使用\n\n1. 在左侧编辑区输入Markdown格式的文本\n2. 右侧会实时显示渲染后的HTML效果\n3. 点击顶部工具栏的\"复制\"按钮可以复制为微信公众号格式\n4. 直接粘贴到微信公众号后台编辑器中即可\n\n### 样式设置\n\n工具栏提供了多种样式设置选项：\n\n- **主题**：选择编辑器的外观主题（浅色/深色）\n- **字体**：选择预览区的字体\n- **字号**：选择预览区的字号大小\n- **主题色**：选择预览区的主题色\n- **代码主题**：选择代码块的高亮主题\n\n### 预览模式\n\n工具栏提供了三种预览模式：\n\n- **自适应**：预览区宽度自适应窗口大小\n- **手机**：模拟手机屏幕宽度（375px）\n- **宽屏**：固定宽度（900px）\n\n## 开发指南\n\n### 项目结构说明\n\n- `src/components`：存放可复用的UI组件\n- `src/pages`：存放页面级组件\n- `src/hooks`：存放自定义React Hooks\n- `src/utils`：存放工具函数\n- `src/config`：存放配置文件\n- `src/contexts`：存放React Context\n- `src/store`：存放状态管理相关代码\n- `src/styles`：存放全局样式文件\n- `src/types`：存放TypeScript类型定义\n- `src/assets`：存放静态资源文件\n\n### 核心组件\n\n- `MarkdownEditor`：主编辑器组件，负责协调编辑器和预览区\n- `Toolbar`：工具栏组件，提供各种设置选项\n\n### 核心功能实现\n\n- `renderMarkdown`：Markdown渲染函数，将Markdown文本转换为HTML\n- `useCopy`：复制功能Hook，处理复制为微信公众号格式\n- `useStore`：状态管理Hook，处理内容和设置的存储\n- `ThemeContext`：主题上下文，负责主题的实时应用\n\n## 贡献指南\n\n我们欢迎任何形式的贡献，包括但不限于：\n\n- 提交bug报告\n- 提交功能请求\n- 提交代码修复\n- 提交新功能实现\n- 改进文档\n\n### 贡献步骤\n\n1. Fork本仓库\n2. 创建你的特性分支 (`git checkout -b feature/amazing-feature`)\n3. 提交你的更改 (`git commit -m 'Add some amazing feature'`)\n4. 推送到分支 (`git push origin feature/amazing-feature`)\n5. 打开一个Pull Request\n\n## 许可证\n\n本项目采用 MIT 许可证。详见 [LICENSE](LICENSE) 文件。\n\n## 联系方式\n\n如有任何问题或建议，请通过以下方式联系我们：\n\n- 提交 [Issue](https://github.com/flyeric0212/wx-md/issues)\n- 发送邮件至 [bo.liang0212@outlook.com](mailto:bo.liang0212@outlook.com)\n\n## 致谢\n\n感谢所有为本项目做出贡献的开发者和用户。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflyeric0212%2Fwx-md","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflyeric0212%2Fwx-md","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflyeric0212%2Fwx-md/lists"}