约 7 分钟读完 · 更新于 2026-10-21 · 文中每条都能在下面的配套工具里动手验证
粘进去就变形：标题没层级、代码块塌成一行、图片一片裂图
典型过程是：用 Markdown 工具预览确认没问题，导出 HTML，粘进公众号编辑器，得到的却是一坨没有层次的纯文本。原因不在 Markdown，也不在编辑器，而是中间那一步——导出的是一份「语义正确但样式全靠 class 和选择器」或「内联样式被生成器剥掉」的 HTML，而公众号编辑器只读内联样式。两边对格式的期待完全错位。
为什么样式会丢：编辑器只读 inline style
公众号编辑器粘贴时做的是「保留内联样式、剥离 class 与外部样式表」的处理。这条规则决定了转换策略：想要什么样式，就必须在 HTML 标签上把样式写成 style 属性，而不是挂在 CSS 里。同理，Markdown 里的裸 URL、脚注、HTML 块能否生效，取决于导出器有没有把它们原样保留——标准 Markdown 允许内嵌 HTML，但不少转换器默认过滤掉标签。
## 请求超时 重试 3 次后放弃： ```js await retry(() => api(), 3); ``` | 环境 | 超时 | | --- | --- | | prod | 30s |
<h2>请求超时</h2> <p>重试 3 次后放弃：</p> <pre><code class="language-js">await retry(() => api(), 3);</code></pre> <table><thead><tr><th>环境</th><th>超时</th></tr></thead> <tbody><tr><td>prod</td><td>30s</td></tr></tbody></table> → 代码块无背景无边距、长行不换行；表格无边框
<h2 style="font-size:20px;font-weight:700;margin:24px 0 12px;padding-left:10px;border-left:4px solid #4f8cff;">请求超时</h2> <p style="font-size:15px;line-height:1.75;color:#3f3f46;">重试 3 次后放弃：</p> <pre style="background:#f6f8fa;border:1px solid #e5e7eb;border-radius:6px;padding:12px;overflow-x:auto;font-size:13px;"><code style="font-family:Menlo,Consolas,monospace;white-space:pre-wrap;word-break:break-all;">await retry(() => api(), 3);</code></pre> <table style="width:100%;border-collapse:collapse;font-size:14px;">…
症状 → 成因 → 修法：四类问题对照
下面按实际排查顺序排列。前两类占全部问题的大半，后面两类是平台限制，改不动只能绕。
| 症状 | 成因 | 修法 |
|---|---|---|
| 标题、正文、引用全是同一个字号 | 导出 HTML 用 class 上样式，粘贴时被剥离 | 用转公众号排版工具重新生成内联样式版 |
| 代码块没有底色，长行把版面撑破 | pre/code 的样式丢了，且默认 white-space 不换行 | 内联 white-space:pre-wrap 加 word-break:break-all |
| 图片显示成裂图图标 | 外链图片有防盗链，公众号不直接引用第三方地址 | 图片转 base64 内嵌，或先上传到公众号素材库再插入 |
| 表格窄屏下串行、边框消失 | 编辑器剥掉 table 样式；宽表格在移动端无法横向滚动 | 先把数据整理成对齐好的 Markdown 表格，粘贴后再微调列宽 |
图片：三条路的取舍，别默认选 base64
- base64 内嵌（data URI）：粘贴即显示，编辑器不挑来源。代价是体积膨胀约三分之一，长图与截图会让整篇文章的 HTML 迅速超标，多图时优先压缩后再转。
- 上传到公众号素材库：体积不变、可复用、加载快。代价是多一步手工操作，且素材库有数量与体积上限。
- 外链直引：在别的平台（知乎、掘金、博客）通常没问题，放进公众号就会裂——不是格式错，是防盗链策略。任何第三方图片地址都不要指望在公众号里直接显示。
- 折中做法：正文内嵌 base64 保证随处可读，同时把同一批图片的原始文件留作素材库备份，需要二次编辑时从素材库替换。
表格与代码块：粘贴前先把结构做对
表格最省事的做法是先用 <a class="faq-link" href="/tools/md-table/">Markdown 表格生成器</a>把 TSV 或 Excel 内容转成带对齐标记的表格：第二行的 `:---` 表示左对齐、`:---:` 表示居中、`---:` 表示右对齐。列宽不均、单元格内换行、竖线被当成列分隔符，这三件事在 Markdown 里都要提前处理，粘进编辑器之后再改就只能靠肉眼对齐单元格了。代码块的坑在换行：默认 white-space 会让一行超长的代码把版面撑破，必须显式加上 pre-wrap，并给 code 指定等宽字体栈，否则中文注释会与代码错位。
反向流程：从一篇网页文章拿回干净的 Markdown
- 优先直接取源：用 <a class="faq-link" href="/tools/html-md/">HTML 转 Markdown</a>粘贴正文区域，勾选参考式链接与干净的标题层级。整页粘贴会把导航、页脚、广告一起带进来，一定要先框定正文容器再复制。
- 处理图片：外链地址会被转成相对或原始链接，重新上传或转 base64，否则回到第一步的老问题。
- 清理残留：把转换后仍然存在的多余空行、重复标题、内联 style 残留删掉，这些在渲染后不影响显示，但会让源文件很难维护。
- 核对可读性：把字数、字符构成与阅读时长看一眼，顺手确认标题层级没有塌成同级——转出来的文章最常见的问题是层级错位，视觉上看不出来，搜索引擎看得出来。
- 落盘前留一份原稿：HTML 格式的原始文件单独存一份，后续每次改动都从原文重来，不要在 Markdown 上反复转换，第三次往返的色值与缩进就会开始漂。
同一份 Markdown 要发三个平台，别只写一份
Markdown 源码是唯一真源，产物按平台派生：公众号要内联样式、压掉外链图片、表格窄版化；技术博客（知乎、掘金、GitHub）可以直接渲染 Markdown，代码块自带高亮与折叠；导出 PDF 或长图时需要重新量一次高度，因为移动端与打印的换行位置不同。三份产物各有取舍，不要试图用一份 HTML 覆盖全部场景——真正的成本不在生成，而在后期返工。
常见问题
Markdown 转 HTML 后粘到公众号里样式全没了，怎么办？
原因是编辑器只保留内联样式，class 和外部样式表会被剥掉。做法是导出时就把样式写进 style 属性——用 Markdown 转公众号排版生成内联样式版再粘贴，比在编辑器里手工调样式快得多。
公众号里的图片为什么总是裂开？
公众号有防盗链策略，不会直接引用第三方图片地址，Markdown 里的外链图片会显示成裂图。两条路：把图片转成 base64 直接内嵌，或先上传到公众号素材库再用编辑器插入。前者体积会膨胀约三分之一，多图时先压缩。
代码块粘进公众号后长行把版面撑破，怎么解决？
给 pre/code 加 white-space:pre-wrap 与 word-break:break-all，并指定等宽字体栈。这两个属性需要写成内联样式才会生效；同时确认导出工具没有把代码块的语言标记 class 剥掉，那通常意味着高亮也一起丢了。
怎么把已有的网页文章转成干净的 Markdown？
用 HTML 转 Markdown，但务必先只框选正文区域再转换，整页粘贴会把导航与广告一起带进来。转完处理三件事：图片重新上传或转 base64、删掉多余空行、核对标题层级是否塌成同级。