不用秀米：用一段内联 HTML 给公众号排版
写一篇两千字的公众号，正文半小时敲完，剩下一个半小时全耗在秀米里拖框、调间距、配图标。后来我把排版整个换成了一段全内联样式的 HTML：浏览器打开、全选、复制、粘进编辑器，格式原样保留。原理只有一句话——公众号编辑器只认写在标签里的 style。下面是完整做法，以及我真干下来才撞见的六个坑。
我不打算论证秀米不好。它解决的是「我不会写 CSS」，代价是「我得用鼠标当画笔」。拖拽式工具和写作这件事天生拧着来：写作是线性的、用键盘；排版是图形的、用鼠标，每切换一次，脑子就要从「我想说什么」跳到「这个框往哪拖」。而现在，我有一个会写 CSS 的助手，就没必要再用鼠标画文章了。
原理：编辑器只认内联样式
先说清楚这套做法为什么成立，否则你会在错误的地方浪费时间。公众号编辑器不是 markdown 编辑器，是一个 Word 式的富文本编辑器。它对你粘进去的 HTML 做了两件很粗暴的事：
- 剥掉
<style>标签和 class。任何写在<head>里、或者靠 class 选择器生效的样式，粘进去全部消失。 - 只保留写在标签上的
style="..."。也就是内联样式（inline style）。这是唯一能活着穿过编辑器的东西。
这也是秀米、mdnice 这些工具背后的同一个原理——它们本质上都是在帮你生成一堆内联样式的 HTML。区别只是它们用面板，你用一段代码。
所以整套流程就三步，简单到不像排版：
- 把排好的 HTML 存成一个
.html文件，用浏览器打开； - 在页面上 全选（Cmd/Ctrl + A）→ 复制；
- 直接 粘贴进公众号编辑器。加粗、引用框、小标题、金句、代码块，全部原样保留。
我真干下来撞见的六个坑
原理很干净，但真上手会撞见一堆只有干过才知道的细节。下面这六个，每一个我都踩过。
坑一：多行代码和 ASCII 图会被压成一行粥
这是最坑、也最反直觉的一个。编辑器在粘贴时会把真实换行折叠成空格，并且丢掉 white-space: pre / pre-wrap。结果就是：一个换行整齐的 <pre> 代码块，粘进去变成一整行糊在一起。
解法：多行代码块不要靠真实换行，改用 <br> 换行 + 缩进，一行一行手动拼。而对齐敏感的 ASCII 图（表格、目录树、流程图），别硬拼了——最稳的做法是在浏览器里截图，当图片插进去，一劳永逸。
坑二：正文宽度必须按 ~578px 设计
公众号正文的实际显示宽度大约是 578px。你的最外层容器就按这个宽度来（max-width:578px），否则在手机上会错位、图片会溢出。别按你电脑屏幕的宽度排，那是骗你自己。
坑三：标题不要写进正文
标题填编辑器顶部的「标题栏」，正文 HTML 里不要再写一个 <h1>。我一般在预览文件里留一个 h1 只为浏览器里好看，但粘贴前会记得它不属于正文——或者干脆粘完把它删掉。
坑四：摘要要自己写，别让编辑器自动抓
如果不填摘要，编辑器会自动从正文抓前一段。它抓出来的东西通常很难看：把小标题和第一句黏在一起，读起来是断的。每篇单独写一条 ≤120 字的摘要当钩子。这条严格说不是排版，但它直接决定打开率，顺手就办了。我常用三种角度：痛点直击 / 反直觉数字 + 金句 / 提问式，一般「痛点」和「提问」更稳。
坑五：封面按 2.35:1 裁，关键元素放中间
公众号主封面的裁切比例接近 2.35:1，两侧会被吃掉。做封面图时把标题、主体这些关键元素压在中间那条带子里，不然一发出来就被裁掉半个字。
坑六：发布前一定用手机宽度预览一遍
电脑上好看不代表手机上好看，而公众号读者九成在手机上。发布前切到手机预览，重点看：段间距会不会太挤、代码块有没有横向溢出、图片是不是顶宽。这一步花三十秒，省掉一次「已发布又撤回重排」。
一个可以直接抄的最小模板
把常用的几个块——小标题、正文加粗、引用框、金句收尾——做成一段内联模板，之后每篇把文字往里一换就行。核心样式长这样：
<section style="max-width:578px;margin:0 auto;font-family:-apple-system,'PingFang SC',sans-serif;font-size:16px;line-height:1.8;color:#3f3f3f;">
<!-- 小标题 -->
<p style="margin:34px 0 16px;padding-left:12px;border-left:4px solid #e8833a;
font-size:19px;font-weight:800;color:#222;">小标题</p>
<!-- 正文 -->
<p style="margin:0 0 18px;">正文段落，<strong style="color:#222;">加粗强调</strong>。</p>
<!-- 引用 / 提示框 -->
<blockquote style="margin:0 0 22px;padding:14px 16px;background:#fbf6f0;
border-left:4px solid #e8833a;color:#5a5048;font-size:15px;">
一段需要被框起来的提示或引用。
</blockquote>
<!-- 金句收尾 -->
<p style="margin:30px 0;padding:20px 18px;background:#fbf6f0;
border-top:2px solid #e8833a;border-bottom:2px solid #e8833a;
text-align:center;font-weight:700;color:#222;">一句话金句。</p>
</section>
注意每个块的样式都写死在 style 里，没有一处 class、没有一个 <style> 标签。这就是它能穿过编辑器的原因。
它真正解放的不是时间
用了一段时间我发现，省时间只是表面。更值钱的是三件事：
- 排版变成了可复用的资产。生成一次，这套模板一直用下去。秀米是每篇重排，这套是一次定义、永久复用。
- 风格是「我自己的」，不是模板库的。主色、字号、间距、金句样式全由我定义，所有文章因此像「同一个人写的」，而不是「同一个模板套的」。
- 改一句话，改全局。想把主色从橙换成墨绿？不进任何面板，跟助手说一句，整套模板重新生成。因为样式是代码，代码可以被一句话批量改。
说到底，秀米帮你绕过了「不会写 CSS」，但把你锁在了鼠标里。而当你身边有一个会写 CSS 的助手，那道墙就没必要绕了——直接推倒，换成一段你能读、能改、能复用的内联 HTML。
写作的人，本该把时间花在写上。排版，交给会写代码的助手就好。