公众号是中文内容创作最高频的发布场景之一，但它的编辑器对外部 HTML / CSS 的兼容性极弱，从其他工具粘贴进去经常翻车。理解这些高频坑，能让你更清楚 Markdown 转公众号 这类工具到底帮你解决了什么，哪些问题又仍然要手动处理。
公众号编辑器的样式白名单
公众号粘贴 HTML 的处理流程：
- 解析 HTML
- 遍历每个标签
- 只保留白名单内的 inline style
- 移除所有 class / id / 外联 CSS
白名单大致包括：
- 颜色：
color、background、background-color - 字体：
font-size、font-weight、font-family、line-height - 边距：
padding、margin（部分） - 边框：
border（部分）、border-radius - 文本：
text-align、text-indent、letter-spacing
不在白名单的（display: flex、grid、transform、animation、伪类、媒体查询）全部失效。
实战影响：转换工具必须把所有样式 inline 写到每个标签上——
<!-- 不行：会被剥成纯 div -->
<div class="quote">引言文字</div>
<style>.quote { background: #f5f5f5; padding: 16px; }</style>
<!-- 行：inline 样式 -->
<section style="background: #f5f5f5; padding: 16px; border-left: 4px solid #6c63ff;">
引言文字
</section>本工具的输出 HTML 体积大约是 Markdown 源文件的 5-10 倍，原因就在 inline 样式重复。
代码块：从 pre 到 span 海
公众号原生没有代码块——白名单连 <pre> 都不在。要在公众号呈现代码高亮，必须把每个语法 token 变成 inline 染色的 <span>：
<section style="background: #1e1e1e; padding: 16px; border-radius: 6px; font-family: Menlo, Consolas, monospace; font-size: 13px; line-height: 1.6; overflow-x: auto;">
<span style="color: #569cd6;">function</span>
<span style="color: #dcdcaa;">hello</span><span style="color: #d4d4d4;">() {</span>
<span style="color: #ce9178;">"world"</span>
<span style="color: #d4d4d4;">}</span>
</section>一段 30 行代码扩成几 KB HTML 是常态。当前工具已经提供多套代码主题和对应的 inline 样式输出，但这并不意味着公众号原生“学会了代码高亮”，只是工具提前替你把高亮结果展开了。
| 主题 | 风格 | 文章场景 |
|---|---|---|
| GitHub Light | 白底克制彩色 | 技术教程、长文 |
| GitHub Dark | 深蓝灰底 | 通用深色 |
| One Dark | 紫黑底暖色 | 视觉冲击、公众号文风 |
| Dracula | 紫调深色 | 设计感强 |
| Monokai | 经典暖色深底 | 代码 demo |
注意：代码块不要太长——公众号正文区移动端只有 ≈340px 宽度，超出会出现水平滚动条，阅读体验差。建议 60 字符 / 行以内，超长代码截图代替。
图片：链接还是上传
把 Markdown 里的图片直接粘到公众号有三种翻车：
1. 图被压糊：公众号会重新压缩外链图，质量降很多 2. 图被裁切：编辑器有”自动适配宽度”，长图被裁 3. 防盗链 403：粘贴外链图，发布后图变成”X”——公众号 CDN 反爬，外链域名取不到图
正确流程：
- 在 Markdown 编辑器把全文写完，图片用占位
- 复制 Markdown → 粘贴到公众号编辑器
- 每张图重新点编辑器的”图片”按钮上传——上传后图存在公众号 CDN，无防盗链问题，质量更稳
如果只是写作阶段，也可以先在工具里保留 Markdown 图片占位，排版完成后再进公众号后台逐张替换。不要把“工具预览里看得到”直接等同于“公众号发布后一定稳”。
公众号编辑器对图片的常见限制：
- 单张图片大小有上限（一般 5-10MB，超过会拒收）
- 单篇图片数量有上限，写作中建议控制在几十张以内，否则会卡编辑器
- 客户端按设备能力下发 WebP 或 JPEG（节省流量）
- 可设置”封面图”（卡片显示用）
中英文混排空格
中英文之间手动加半角空格是中文排版社区的约定（“盘古之白”），不是字体技术问题——加了之后中英文密度均匀，节奏更舒服；不加则视觉上中英黏连，长文累眼。当前工具已经提供自动空格能力，能减少这类基础修饰的手工成本。
正式排版规则（盘古之白 / Pangu）：
- 中文与英文之间加半角空格：
使用 React - 中文与数字之间加半角空格：
年龄 28 岁 - 中文与全角符号之间不加：
他说："你好" - 标点不加空格：
Vue.js,React.js
不规范：
我用React写了一个CRUD应用，性能比Vue3好30%。
规范：
我用 React 写了一个 CRUD 应用，性能比 Vue3 好 30%。工具的”自动空格”开关会在中英文交界处自动补半角空格，但是否开启，仍取决于你的文章风格和目标读者习惯。
公式和流程图：能写，但兼容方式不是“原样运行”
公众号后台不会替你执行 KaTeX 或 Mermaid 这类需要额外渲染的内容。所以更稳妥的策略不是把 JS 一起塞进公众号，而是：
- 在工具里继续按 Markdown 写公式或 Mermaid。
- 预览阶段确认效果。
- 复制到公众号时，把这些特殊块转成图片兼容。
也就是说，当前工具已经能帮你处理这类内容，但落到公众号后的保留方式是“图片化兼容”，不是让公众号原生去渲染它们。
引用块和强调
公众号默认引用块样式很丑（左侧灰色细边）。转换工具一般会重写：
<blockquote style="
border-left: 4px solid #6c63ff;
padding: 12px 16px;
margin: 1em 0;
background: #f7f8fa;
color: #555;
">
引言文字
</blockquote>加粗和斜体需要 inline 强化：
<strong style="color: #6c63ff;">重点</strong>
<em style="color: #ff9800;">侧重</em>光用 <strong>、<em> 标签虽然会显示加粗 / 斜体，但颜色变化能让重点更突出。
表格的兼容性
Markdown 表格转公众号 HTML 后展示尚可，但有限制：
- 移动端宽表会水平滚动（公众号支持，但部分老版本不支持）
- 表格无法插入图片（公众号编辑器限制）
- 单元格合并（rowspan / colspan）部分失效
复杂表格建议截图作为图片插入，不要用 Markdown 表格。
标题层级
公众号正文 H1 不建议用——大标题已经是文章标题。正文从 H2 开始：
<h2 style="
font-size: 19px;
font-weight: bold;
color: #333;
margin: 24px 0 12px;
padding-bottom: 6px;
border-bottom: 2px solid #6c63ff;
">第一章</h2>
<h3 style="
font-size: 16px;
font-weight: bold;
color: #555;
margin: 18px 0 8px;
">小节</h3>H4 以下慎用——大多数主题不会差异化样式，用户辨识不出层级。
字体栈
公众号字体回退链：
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC",
"Microsoft YaHei", "Source Han Sans CN", sans-serif;iOS / macOS 显示 PingFang，Windows 显示 Microsoft YaHei，其他用系统默认。代码用：
font-family: Menlo, Consolas, "Courier New", monospace;Mac 上 Menlo，Windows 上 Consolas，老系统回退到 Courier New。
一句话总结
公众号排版的核心不是“让后台支持所有 HTML”，而是提前把能保留的样式都 inline 化，把代码高亮、公式、流程图这类复杂内容转换成公众号能接受的形式，再把图片和最终细节留到后台收尾。