公众号排版全要素示例

这是一段导语。紧跟 # 大标题之后的第一段会自动套用导语样式——字距收紧、段落间距更贴大标题。用它来写文章的一句话钩子，比正文主体更抓眼球。

正文段落会两端对齐，行高 1.85、字号 17px，适合手机阅读。文字可以加粗强调、斜体标注、删除线表示已过时，还能混排行内代码（青绿底）和链接：点我看秋秋编辑器。

1.1｜正文里的图片

图片单独成行时自动通栏并带蓝色描边，居中排布：

如果图片是竖图（高大于宽），会按公众号惯例缩到 75% 宽居中，避免长图在手机上过高。图片也可以嵌在段落里当行内图： 这样随文字流动。

多图并排滑动

连续多行、每行一张图（中间不加空行）会自动并排成横向可滑动的相册条——适合放长截图、对比图、过程分解。手机/网页都能左右滑动，微信里也保留：

想回到单张通栏，就让图片之间有空行或一句话间隔即可。

1.2｜数据表格

1.3｜列表

无序列表和有序列表都支持，还能多级缩进：

• 三级标题 ### 小节 是更细的结构层级
• 列表项里的强调、斜体、代码、链接 都能内联渲染
• 嵌套用两空格缩进：
  • 外层：两级子项
    • 内层：三级子项
• 每项一个段落，微信后台粘贴不出乱码

有序列表换个图标：

1. 先明确文章要传达的关键信息
2. 再用 # / ## / ### 勾出结构骨架
3. 最后补图片、表格、引用和代码
4. 点击右上角「复制到公众号」一键完成

1.4｜引用与提示条

这是引用块：浅黄底 + 金色左竖线，适合放「摘要」或「强调某段观点」。连续几行都写 > 会合成一整块。

信息提示

Callout 用 > [!note] 标题 开头，正文写在下几行。视觉上是浅蓝底 + 蓝色左线，标题行蓝字加粗。适合放「工具提示」「重点解释」这类信息。

特别注意

warning 类型会显示不同的标题文字。可用的类型有 note / tip / warning / info / important / success / question / example / danger / caution / quote，都用同一个蓝底信息条承载。

1.5｜代码块

行内代码、代码块都能用。代码块深色底 + 等宽字体，自动换行：

const editor = {
  name: "秋秋公众号排版",
  support: ["封面图", "章节编号", "表格", "引用", "Callout", "代码块"],
};
console.log(editor.support.length); // 16

1.6｜分隔线

分隔线用 ---，是一段居中的细细蓝色短线，用于不设小标题时的内容分节。它不依赖任何容器，粘贴进公众号不会触发拆行。

排版参数速查

上面演示了每种写法长什么样，下面这张表把每种元素的字号、字重、颜色、行高列清楚——它不是示例文案，而是当前这套排版内核实际用的数值（完整定义见代码里 lib/wechat.ts 的常量）。

配色速记：正文字灰 #333、一二三级标题为粉 #D9898E → 蓝 #3A8BE8 递进；强调与链接用青绿 #16B99A；行内代码青底 #12A98D / 浅青底 #F1FAF8；代码块深色 #171A1F；引用金黄 #DB7A0E + 浅黄底 #FEF9EA；提示条蓝 #3A8BE8 + 浅蓝底 #F6FAFE；表格表头灰蓝 #5C7D9B + 米白底。

关于这份示例

上面把 7 大类能力 + 排版参数速查 都过了一遍：章节与导语、正文图片与竖图、数据表格、有序/无序/嵌套列表、引用与 Callout 提示条、行内代码与代码块、分隔线。想改字号或颜色，直接编辑 lib/wechat.ts 里对应的常量（正文 BODY、章节 chapter()、小节 section()、列表 LIST_LI、表格 tableHtml()、代码 codeHtml()、引用 QUOTE_LINE、提示条 CALLOUT_*、链接 LINK_STYLE 等），保存后预览与复制到公众号都会同步生效。