我做了一个微信公众号排版工具今天想聊聊这 57 次提交背后的故事——不是讲技术多牛而是讲一个独立开发者在「能跑」和「敢用」之间反复横跳的真实心路。如果你也受够了排版浪费时间、复制粘贴丢样式文末有这个工具的体验地址免费。一、为什么做这个工具写公众号的人都知道痛点想专注写作结果一半时间花在调字号、调边距上看到喜欢的文章样式只能靠截图估颜色、估间距复制到公众号编辑器背景色没了、引号变方块、加粗丢失多个账号多套样式没有统一复用HTML样式一键重排版我决定自己写一个所见即所得一键复制到公众号不丢样式。现在这个工具已经帮我节省了 10 篇文章、累计 5 小时的排版时间。如果你也在写公众号应该能用得上体验方式见文末。二、从 0 到「能跑」最初版本很朴素左边 Markdown 编辑器右边预览5 套主题复制到剪贴板。第一次提交 70dbf2b功能齐全、能跑起来。但「能跑」离「敢用」差了十万八千里。三、那些让我崩溃的小问题1. 字体引号的诅咒复制到公众号加粗的**之间出现了span stylefont-family:这种垃圾属性。我以为是 markdown-it 的问题改了三版解析器后来发现是字体族font-family里的引号被公众号编辑器识别为属性分隔符。修复去掉引号加转义重构 buildInlineHtml 流程。相关 commita09a7e8、71dcfc3、a9650622. 背景色复制过去就消失设置了好看的背景色复制到公众号变成白底。排查发现公众号编辑器会丢弃外层 div 的 background-color必须用 section 标签 强制十六进制不能写变量。修复外层用section包裹颜色全部展开为#xxxxxx。相关 commit3199323、d8bd279、1641f963. 加粗与中文相邻时解析失效**加粗**内容这种中文紧贴的情况markdown-it 解析失败加粗丢失。加了正则兜底 单测回归再没复发。相关 commit422fe184. 一键复制按钮点不动线上用户反馈按钮无反应。本地一切正常。最后发现是 Clipboard API 的 MIME 兼容性问题公众号环境只支持text/html一种。相关 commit3aa7345、915a243、5a5c8b0每一个 bug 都是用户骂出来的。如果你试用时遇到问题直接留言我改。四、第一次大重构从单文件到模块化功能稳定后App.tsx 已经膨胀到 1500 行主题配置全部堆在themes.ts一个文件里1026 行。我意识到个人项目最怕的不是写不出来是改不动。于是做了三次大手术拆分组件App.tsx → EditorPanel / PreviewPanel / ThemePanel / FormsPanel / CardsPanel / ModulePanel 6 个 hooksCSS 模块化950 行的 styles.css → 8 个职责分明的子文件主题系统重构从硬编码 →mergeVars配置驱动新增主题只需 5 行结果新增一套主题从 200 行代码降到 5 行。相关 commitafeb213、58f5270、93755c3、abd2336五、40 套主题6 大风格按简约 / 活泼 / 专业 / 文艺 / 科技 / 节日分类精选了 40 套主题涵盖默认公众号风格、极简白商务蓝、暖色编辑樱花、春日、清明等节日主题深度阅读、技术风格每套主题不只是改颜色还包含标题样式、加粗颜色、引用样式、代码块、列表、分割线。最让我得意的是现代商务蓝——给标题加蓝色圆角背景加粗文字用强调色被好几个做付费内容的朋友直接拿去用。如果你有想要的主题样式留言告诉我我加到下一版里。六、那些看似很小的修复Ctrl/CmdB复制到公众号Ctrl/CmdS导出草稿Toast 居中、自动消失段后距实时调节主题支持分类筛选草稿自动保存到本地模块库支持拖拽排序、标签筛选、导入冲突策略每一个都对应一个真实的写作场景。做工具最怕我觉得用户不需要但其实用户每天都在骂。七、为什么值得花这么多时间我自己的公众号用这个工具写了 10 篇文章每篇节省 30 分钟排版时间。更重要的我再也不会因为排版难看而犹豫要不要发。这就够了。八、技术栈给想抄作业的同学React 18 TypeScript Vite开发体验拉满markdown-itMarkdown 解析CSS 变量 内联样式双轨预览用 var() 保持可调复制展开为具体值配置驱动主题系统mergeVars 组合零硬编码本地存储 剪贴板 API无后端纯前端代码 4500 行57 次 commit从 5 月 7 日到 6 月 2 日。九、这个工具适合谁如果你符合以下任意一条这个工具值得一试✅写公众号但不想被排版绑架的人打开就能用不需要注册数据全部存在本地浏览器里关闭页面也不会丢。✅从网页或 Word 复制内容过来格式全乱的人内置「一键重新排版」功能——把乱糟糟的 HTML 粘贴进去自动清理成一键可用的 Markdown 样式。✅想要统一多账号排版风格的人40 套主题覆盖简约、活泼、专业、文艺、科技、节日 6 大风格选定后一键套用永久复用。✅想要偶尔加点视觉模块封面卡、提示卡、步骤卡的人模块库支持保存、标签分类、拖拽排序下次直接复用不用每次重新调。✅完全免费没有任何套路不需要关注公众号不需要转发不需要付费——就是我自己写的工具顺便分享出来。十、关于开发过程中的工具开发这个排版工具的过程中我用 MonkeyCode 这个 AI 编程平台辅助代码生成和调试——确实帮我省了不少写重复代码的时间。他们最近在办一个「AI 编程马拉松」活动完成任务可以免费领取积分想体验 AI 编程平台的同学可以去看看 通过我的邀请链接参加不多说活动页面比我讲得清楚。十一、如何获取这个工具第一步关注公众号「米可乐的AI副业实录」为什么关注我会持续更新这个工具新主题、新功能公众号里会分享更多 AI 编程做工具的真实记录偶尔发点排版技巧、公众号运营干货如何你还有写标题的困扰我还有一个爆款标题的系统工具第二步后台私信「排版工具」我会自动回复体验网站地址 使用说明。完全免费不需要转发不需要集赞。因为这个工具是我真实在用的我也知道写公众号的人最缺的是时间不是钱。如果你也在为了排版困扰欢迎试用地址通过私信获取有任何问题留言告诉我。#公众号工具 #独立开发 #技术复盘 #React