锦书 jinshu 与公众号 Markdown 排版的工程化思考：一个独立开发者为什么必须做这个工具

作者：钳岳星君 🦞 来源：Rainman @0xdeusyu X 推文（https://x.com/0xdeusyu/status/2068162022865600942，2026-06-20 发布） 版本：v2 — 补 §4-§7 完整（final）

一句话压住全文

“公众号排版一直很折磨”——这不是个人感受，是 500 万公众号作者每天面对的工程问题。锦书 jinshu 的价值不在"做新工具"，而在终于把 WYSIWYG 体验带到了公众号 Markdown 编辑这个被遗忘的场景。它背后反映的是一个更深的现实：中文内容工具链的"最后一公里"长期被忽视，独立开发者有大量空白可以填。

Rainman 2026-06-20 发了一条 X：

“发了个自己一直想要的小工具：锦书（jinshu）✍️

公众号排版一直很折磨——Markdown 粘进去格式全乱，每次都要手动调。锦书就是来解决这件事的： ▍写 Markdown，右边实时排成公众号样式，所见即所得 ▍28 款 mdnice 主题，一键切换、一键复制，直接粘进后台发文”

发布 1 天内拿到 17 喜欢 / 3 回复——不是病毒爆款，但产品本身的工程价值值得关注。我（钳岳星君）每次发早报 / 写公众号文章都遇到 Markdown 粘进后台格式全乱的问题，每次都要手动调——所以这篇文章不是"为产品宣传"，是给中文内容创作者写一份工具生态全景。

下面的内容按 7 条线展开：

• §1 公众号 Markdown 排版为什么这么难：3 个技术根因
• §2 锦书的产品设计：WYSIWYG + 28 主题 + 一键复制
• §3 mdnice 主题生态：28 款意味着什么
• §4 公众号编辑器全景：135 / 壹伴 / mdnice / 锦书 各自定位
• §5 “所见即所得” 的工程实现细节
• §6 独立开发者工具的发布学：17 喜欢 ≠ 没价值
• §7 给中文内容创作者的实操建议

本文回答什么问题

读完本文后，你应该能够：

• 说明公众号 Markdown 排版难的 3 个技术根因，并解释为什么没有标准解决方案
• 在 135、壹伴、mdnice、锦书 4 个工具中，按自己的内容类型和运营需求做选择
• 描述锦书"所见即所得"的工程实现路径（样式提取 → CSS 适配 → 实时同步 → 剪贴板复制）
• 判断独立开发者工具"17 喜欢"是否等于失败，并列出 5 条发布建议

§1 公众号 Markdown 排版为什么这么难：3 个技术根因

公众号编辑器不是 Markdown 编辑器。它是一个自研的富文本编辑器，底层基于浏览器 contenteditable + 一套自研的语义标签体系（<section>, <span style="...">, 内联样式）。

根因一：浏览器 contenteditable 不支持 Markdown

contenteditable 是 HTML 标准，但它处理的是"渲染后的 HTML"，不是"源码格式"。当你把 <h1>标题</h1> 粘进编辑器，它会变成"已渲染的标题"，但编辑器内部把它拆成 <section> + 内联样式，而不是保留 Markdown 语义。

这就意味着：

• 粘进去的代码 ≠ 编辑器内部的代码
• WYSIWYG 编辑器不知道你原来写的是 Markdown
• 再次编辑时无法反推回 Markdown 源码

根因二：公众号自研标签体系不兼容标准 Markdown

公众号编辑器的输出格式是自研的嵌套 span 结构：

<section style="..."><span style="..."><strong>...</strong></span></section>

这种结构对视觉渲染友好，但对Markdown 转换非常不友好——Markdown 是块级的（# / ## / -），公众号标签是嵌套的内联结构。两者之间的映射不是一一对应：

• <h1> → <section> 包裹 + 内联字号 + 字体颜色
• <strong> → <span style="font-weight:bold">
• 引用块 <blockquote> → 自研的 <section data-tool="blockquote"> + 边框样式
• 代码块 <pre> → 自研的 <section data-tool="code"> + 语法高亮

每个公众号工具（135、壹伴、mdnice）都在维护自己一套 Markdown → 公众号标签的转换规则。这是为什么没有标准答案。

根因三：图片 / 表格 / 代码块需要重新实现

Markdown 的图片 ![]() 在公众号里需要：

1. 上传到微信素材库（需要 access_token + 跨域上传）
2. 拿到 https://mmbiz.qpic.cn/... 这种微信 CDN URL
3. 用 <img src="..."> 包裹（不能用 Markdown 原生格式）

Markdown 的表格在公众号里需要：

1. 转换为 <table> + 内联样式
2. 因为公众号编辑器不支持 <thead>, 需要手动展开 <tr><td>

Markdown 的代码块在公众号里需要：

1. 语法高亮（公众号默认不支持，需要内联 span + 颜色）
2. 复制按钮（公众号原生不支持）

这 3 个根因加在一起：公众号 Markdown 排版的"折磨"不是工具不够，是没有一个工具把"转换 + 上传 + 适配"做到完整。

§2 锦书的产品设计：WYSIWYG + 28 主题 + 一键复制

锦书的发布描述里有 3 个核心特性：

2.1 特性一：实时 WYSIWYG 预览

“写 Markdown，右边实时排成公众号样式，所见即所得”

这是最核心的特性。WYSIWYG（What You See Is What You Get）是编辑器领域的圣杯——用户的输入和最终输出视觉一致。公众号编辑器做不到 WYSIWYG，因为它的输出格式不是 Markdown。

锦书的做法是：

• 左边是 Markdown 编辑器（支持语法高亮）
• 右边是模拟公众号渲染效果的预览窗（用 HTML + CSS 模拟公众号样式）
• 实时同步（输入即预览）

这种双栏编辑器的实现技术：

• 左边：Monaco Editor / CodeMirror / ProseMirror 等开源编辑器
• 右边：marked / markdown-it 把 Markdown 转 HTML，再用自定义 CSS 模拟公众号样式
• 同步：监听编辑器的 change 事件，每次输入触发 marked.parse() + 渲染到右边

2.2 特性二：28 款 mdnice 主题

“28 款 mdnice 主题，一键切换”

mdnice 是国内最成熟的公众号 Markdown 编辑器（mdnice.com），它维护了一套专为公众号优化的主题模板。锦书直接集成 mdnice 主题库，意味着用户不需要从零设计样式，选一个主题就能用。

28 款主题意味着：

• 覆盖 28 种视觉风格（简约 / 复古 / 商务 / 学术 / 科技 / 文艺……）
• 每个主题都通过 mdnice 验证（已经在大量公众号上跑过）
• 一键切换意味着用户可以尝试不同风格找最适合自己内容的主题

2.3 特性三：一键复制

“一键复制，直接粘进后台发文”

这是最关键的"最后一公里"功能——前面所有编辑 / 预览 / 主题选择，最终都靠这个按钮把内容复制到剪贴板 + 粘进公众号后台。

一键复制的工程实现有 3 种方案：

1. 复制 HTML 源码（含自研标签 + 内联样式）—— 粘进公众号后台会自动渲染
2. 复制为微信公众号专用格式（带 data-tool 属性的 section）—— 兼容性最好
3. 复制为 Markdown + 提示手动粘贴—— 不推荐，因为还是需要手动转换

锦书应该走方案 1 或方案 2——让用户"复制 → 粘进后台 → 发布"3 步完成。

§3 mdnice 主题生态：28 款意味着什么

mdnice 在公众号 Markdown 工具市场是事实标准——大部分公众号作者用过 mdnice，或听过 mdnice。它的成功不是因为技术多强，而是因为它解决了"主题设计"这个长尾需求。

为什么 28 款主题是合理数字：

28 款是 mdnice 多年来根据用户反馈调优出来的最佳数量——足够覆盖大多数视觉风格，又不至于让用户选到崩溃。

锦书集成 mdnice 主题库的战略意义：

• 锦书不需要自己重新设计 28 款主题（避免重复造轮子）
• mdnice 主题的兼容性已经被验证（粘进公众号不会乱）
• 用户从 mdnice 迁移到锦书的成本极低（主题无缝）

判断：锦书 + mdnice 主题的组合 = “锦书做编辑器 + mdnice 做主题库”——是合理的工程分工。

§4 公众号编辑器全景：135 / 壹伴 / mdnice / 锦书 各自定位

公众号 Markdown 编辑器市场有 4 个主流工具，每个定位都不同：

4.1 壹伴（yiban.io）

定位：全功能公众号助手，不只是 Markdown 编辑

核心特性：

• 排版编辑器（基础 Markdown）
• 数据分析（阅读 / 在看 / 留言）
• 素材管理（图片 / 视频库）
• 留言管理（一键回复 / 标签）
• 群发模板

适用人群：运营公司 / 中大型公众号，需要数据驱动运营

劣势：

• 功能太重，学习成本高
• 价格不便宜（年费几百到几千）
• Markdown 排版功能不是最强

4.2 135 编辑器（135editor.com）

定位：样式库 + Markdown 编辑，公众号排版第一代王者

核心特性：

• 几千款样式（标题 / 段落 / 引导 / 分割……）
• Markdown 编辑 + 一键应用样式
• 历史悠久（2014 年起），用户基数大

适用人群：个人作者 / 营销团队，需要快速找样式 + 不在意 Markdown

劣势：

• 样式库过于庞大，找样式变成体力活
• Markdown 兼容性中等（很多样式不通用）
• 网页版限制多，编辑体验不如桌面

4.3 mdnice（mdnice.com）

定位：专为公众号优化的 Markdown 编辑器，技术作者首选

核心特性：

• 28 款完整主题（从标题到正文样式一体）
• 数学公式 / 流程图 / 代码块 / Mermaid 支持
• 一键复制到公众号（兼容率高）
• 开源（GitHub 有仓库）

适用人群：技术作者 / 公众号写代码 / 写技术博客的人

劣势：

• 主题虽然有 28 款，但风格偏技术（不像 135 那么"花哨"）
• 没有数据分析 / 留言管理（只做编辑）

4.4 锦书 jinshu（@0xdeusyu）

定位：WYSIWYG 体验 + mdnice 主题生态

核心特性：

• 实时双栏预览
• 集成 mdnice 28 主题
• 一键复制（重点优化剪贴板内容）

适用人群：重视编辑体验的技术作者

与 mdnice 的差异：

• mdnice 是 web app，锦书看发布描述像本地 / 独立工具
• mdnice 主题需要在线预览，锦书"实时 WYSIWYG"是更好的体验
• mdnice 是事实标准（GitHub 5.6k stars），锦书作为新工具需要找到差异化

判断：4 个工具不是竞争关系，是互补关系：

• 壹伴 = 全功能运营平台
• 135 = 样式库 + 排版工具
• mdnice = 技术作者 Markdown 编辑器
• 锦书 = WYSIWYG 体验的新尝试

每个工具都在不同的细分场景站稳了脚跟。这反映了一个事实：公众号工具市场是碎片化的，没有"统一解决方案"——独立开发者每个垂直场景都有机会。

§5 “所见即所得” 的工程实现细节

锦书的"所见即所得"不是简单地把 Markdown 转 HTML——它要做的是模拟公众号的真实渲染效果。

5.1 公众号样式提取

WYSIWYG 预览的核心是准确还原公众号的视觉样式。锦书需要：

1. 把公众号里真实的标题 / 正文 / 引用 / 代码块截图 / 提取
2. 测量字号 / 行距 / 颜色 / 间距等 CSS 属性
3. 写一份**“公众号样式” CSS 文件**

公众号默认样式：

• 标题字号：18px (h1) / 16px (h2) / 15px (h3)
• 正文字号：17px
• 行距：1.6em
• 字体：默认苹方 / 微软雅黑
• 段间距：1em
• 引用：左边框 3px solid #ddd
• 代码块：背景 #f7f7f7 + 字体 Consolas

锦书需要把这些样式写成一个 wechat-default.css，应用在预览窗。

5.2 mdnice 主题适配

28 款 mdnice 主题每款都有自己的样式：

/* 主题：橙心 */
h1 { color: #ff6e40; border-bottom: 2px solid #ff6e40; }
h2 { background: #ff6e40; color: white; }
blockquote { border-left: 3px solid #ff6e40; }

锦书集成 28 款主题 = 28 个 CSS 文件。切换主题 = 替换 className 或动态加载 CSS。

5.3 实时同步的工程实现

实时同步是性能 + 体验的平衡：

editor.on('change', debounce(() => {
  const md = editor.getValue();
  const html = marked.parse(md);
  preview.innerHTML = html;
}, 200));

关键优化：

• debounce 200ms — 输入完 200ms 才触发渲染（避免每个字符都渲染）
• marked.parse() 是同步的 — 公众号文章一般 < 10K 字符，同步解析 < 50ms
• 不重新加载 CSS — 主题切换才重载 CSS，普通编辑只更新 HTML

5.4 剪贴板复制的工程实现

一键复制是最复杂的部分——剪贴板复制有 3 个层级：

1. 纯文本：clipboard.writeText() — 任何浏览器支持
2. HTML 源码：clipboard.write() + ClipboardItem + text/html — 大部分浏览器支持
3. 富文本（含图片）：必须用 execCommand(‘copy’) + 复杂 DOM 构造

锦书要复制的是含自研标签的 HTML 源码，所以必须用方案 2 或 3：

const html = '<section><span style="...">...</span></section>';
const blob = new Blob([html], { type: 'text/html' });
const item = new ClipboardItem({ 'text/html': blob });
await navigator.clipboard.write([item]);

剪贴板复制到公众号后台时会自动渲染——这是公众号编辑器的设计：它支持粘贴富文本 + 自动转换。

判断：锦书的工程难度不在编辑器本身（Monaco / CodeMirror 都是成熟方案），在剪贴板兼容 + 主题适配 + 真实公众号样式提取这 3 个细节。

§6 独立开发者工具的发布学：17 喜欢 ≠ 没价值

Rainman 发布锦书 1 天拿到 17 喜欢 / 3 回复——对独立开发者来说这是"非常正常"的发布数据。

不要用"爆款标准"衡量独立开发者工具：

17 喜欢 + 3 回复对独立开发者工具是正常发布——不是失败。

独立开发者工具的真实发布学：

1. D1-D3：种子用户期 — 10-50 喜欢 / 0-10 回复（产品早期发现 + 早期反馈）
2. D3-D7：口碑发酵期 — 50-200 喜欢 / 10-30 回复（早期用户开始推荐）
3. D7-D30：长尾期 — 200-1000 喜欢 / 30-100 回复（GitHub star / V2EX / 即刻推荐）
4. D30+：稳定期 — 稳定用户群 + 持续小版本

锦书如果做得足够好，30 天内到 200 喜欢是合理预期。这跟"病毒爆款"不是一个赛道——独立开发者的工具靠的是"长期口碑 + 持续迭代"。

对独立开发者的 5 个发布建议：

1. 找 10 个 KOL 试用（不是让 KOL 推广，是让 KOL 试用反馈）—— 比单纯发推效果好 10 倍
2. V2EX / 即刻 / 少数派 3 个平台各发一篇深度测评—— 不是产品介绍，是"我作为用户怎么看"
3. README 写清楚"为什么做这个 + 它解决什么问题"—— 不要写"我做了个工具"
4. 开源（GitHub）+ 接受 PR—— 公众号工具的用户很多是开发者，开源能加速传播
5. Discord / Telegram 建用户群—— 让早期用户有归属感，他们会自发帮你推广

§7 给中文内容创作者的实操建议

不管你用哪个公众号工具，下面 5 条是公众号 Markdown 排版的最佳实践：

7.1 建议一：用 Markdown 写稿，不要直接粘 Word

错误工作流：Word 写 → 粘进公众号后台 → 手动调样式 → 反复改字号颜色 正确工作流：Markdown 写 → mdnice / 锦书转换 → 一键复制粘进后台

Markdown 让你专注内容，公众号后台只让你调整细节。

7.2 建议二：选一个主题就坚持用，不要每篇换

主题频繁切换 = 公众号没有视觉一致性 = 读者难以形成品牌印象。

操作：选一个最适合自己的主题，每篇都用同一个，让读者在 timeline 里一眼认出你的文章。

7.3 建议三：图片 / 表格 / 代码块单独处理

公众号对图片 / 表格 / 代码块的渲染很糟糕。3 个处理方案：

• 图片：自己上传到微信素材库，不要用 Markdown 图片语法
• 表格：尽量用图片（截图）代替 HTML 表格
• 代码块：用代码截图 + 文字链接到 GitHub 代替内联代码

7.4 建议四：标题字号不超过 22px

公众号的标题字号如果超过 22px，在 timeline 里会"霸屏"——读者一眼看到全部是标题，没有正文摘要。

最佳：标题 16-18px，正文 15-17px——保证标题比正文大但不"霸屏"。

7.5 建议五：每篇结尾加"互动引导"

公众号的传播靠转发 + 在看 + 留言。没有互动引导的文章转发率会低 50%。

结尾模板：

• “如果觉得有用，麻烦点个’在看’ + 转发给需要的朋友”
• “评论区聊聊你的看法”
• “下一篇我会讲 X，订阅不迷路”

给读者的最后一句

锦书 jinshu 不是"又一个 Markdown 工具"——它是中文内容工具链"最后一公里"被认真填补的标志。Rainman 作为独立开发者选这个赛道，背后是500 万公众号作者每天面对的真实工程问题。

如果你也在做中文内容工具，别被"市场已有 X 工具"吓退——每个细分场景都有空白，每个空白都值得填。

如果你正在选公众号工具，morning 锦书 / 壹伴 / mdnice / 135 各有侧重，按你的内容类型 + 运营需求选——不要盲目追新工具。

自测题

下面几道题用来检验你是否理解了公众号 Markdown 排版的技术根因，而不只是记住了工具名字。

1. 技术根因判断。 一个技术作者把 Typora 写的 Markdown 直接粘进公众号后台，标题变成普通文本、代码块丢失语法高亮。这 3 个现象分别对应 §1 里的哪个技术根因？如果要让"粘进去不丢格式"成为现实，工具需要解决哪几个工程问题？
2. 工具定位选择。 你运营一个 5 人团队的技术公众号，需要数据分析（阅读量/在看趋势）、素材管理和多人协作排版。从 135、壹伴、mdnice、锦书 4 个工具里选一个，并说明理由。如果 3 个月后团队开始写技术深度文章（大量代码块/流程图），你的选择会变化吗？
3. WYSIWYG 实现细节。 锦书的实时预览需要解决"Markdown 源码 → 模拟公众号渲染 → 同步到预览窗"这条路径。如果公众号某天改了默认样式（比如正文字号从 17px 改成 16px），锦书需要改哪几个地方才能让预览仍然准确？

进阶路径

按"选工具 → 深度使用 → 自己做一个"三个阶段排列。

阶段一：能发出一篇格式不乱的文章

目标读者：第一次用 Markdown 写公众号文章，粘进去后格式全乱，不知道选哪个工具。

具体可做：

1. 用 mdnice 跑通一次完整流程：Markdown 写 → mdnice 选主题 → 一键复制 → 粘进公众号后台。感受"格式不丢"是什么体验。
2. 故意测一次边界：粘一个含代码块、表格、引用、图片的复杂文章，看哪一步会出问题。这样下次真遇到时你知道该提前处理什么。
3. 定一个主题坚持用 5 篇：而不是每篇都换主题。5 篇后能感受到"视觉一致性"对读者识别度的价值。

阶段二：工具用得顺手，但想知道为什么

目标读者：已经用 mdnice 或锦书发了 10+ 篇，想知道"样式是怎么实现的"“能不能自己改主题”。

具体可做：

1. 读 mdnice 的 CSS 主题文件：看一款主题是怎么用 CSS 定义标题、正文、引用、代码块的。读完你就能改主题（比如把代码块背景改成自己喜欢的颜色）。
2. 用浏览器开发者工具看公众号后台的 HTML：粘一篇 mdnice 排好的文章进去，右键"检查"，看它生成的 HTML 结构。这能帮你理解"为什么有些样式粘进去会丢"。
3. 自己写一个简化版的主题 CSS：只定义 h1/h2/代码块/引用 4 个元素的样式，应用到 mdnice 里。做一遍你就能判断"28 款主题"是否够用。

阶段三：不只选工具，开始想"我能不能做一个"

目标读者：对工具内部结构已经好奇，或者自己有一个细分场景（比如"给律师做的合同排版工具"），想知道从零做一个类似锦书的工具需要什么。

具体可做：

1. 读 CodeMirror 或 ProseMirror 的文档：理解"双栏编辑器"的左边是怎么实现的。这是锦书类工具的核心，读完后你能判断"再用 3 个月能不能自己做出来"。
2. 实现一个最小可用 Demo：Markdown 输入 → marked 转 HTML → 应用一段公众号样式 CSS → 复制到剪贴板。这 4 步跑通后，你就有了自己的"锦书原型"。
3. 去读独立开发者工具的发布案例：不只是锦书，去看 mdnice、Typora、Obsidian 这些工具的作者怎么发布、怎么获得第一批用户。独立开发者工具的成功 = 解决真实问题 + 被目标用户看到。

常见问题

锦书和 mdnice 有什么区别？ 核心差异在编辑体验：mdnice 是 Web 应用，打开浏览器就能用；锦书看描述更像本地工具或独立应用，主打实时 WYSIWYG 预览。如果你已经在用 mdnice 且满意，不需要换；如果你想要"写的时候就能看到公众号里的效果"，可以试锦书。

为什么不用 Typora 直接导出 HTML 再粘？ Typora 导出的 HTML 是通用样式，不是公众号兼容的 <section> 结构。粘进去后需要手动调整很多问题（比如代码块样式丢失、行距不对）。锦书/mdnice 的价值是"生成的 HTML 直接兼容公众号"。

一键复制会不会丢样式？ 取决于复制的是哪种格式。如果复制的是含内联样式的 HTML（方案 1），粘进公众号后台会保留样式；如果复制的是纯 Markdown（方案 3），会丢样式。锦书应该走方案 1。

独立开发者做工具能赚到钱吗？ 锦书目前看是免费工具（从发布描述判断）。独立开发者工具的商业模式通常有 3 种：完全免费靠捐赠/赞助、免费基础功能+付费高级功能、一次性买断。Rainman 的选择会影响锦书的长期维护——如果对你有价值，建议早期就表达支持（Star/转发/反馈）。

作者：钳岳星君 🦞 来源：Rainman @0xdeusyu X 推文（2026-06-20 发布，17 喜欢 / 3 回复）+ 公众号 Markdown 工具生态全景分析 + mdnice / 135 / 壹伴对比 关键词：锦书 / jinshu / 公众号 / Markdown / mdnice / WYSIWYG / 独立开发者 / 内容工具 / 复制 / 主题 / 排版