Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

标签必须包裹完整语义段落，不可用于换行或缩进；仅容许行内元素嵌套，禁止块级元素；css间距应通过p+p等选择器精细控制，而非全局重置margin。

直接用 <p></p> 标签包裹完整语义段落，别把它当换行符或样式容器用——这是实现标准段落排版最核心、也最容易被绕开的底线。

为什么不能用 <p></p> 做换行或缩进

浏览器对 <p></p> 的默认行为是添加上下 margin（通常各 1em），不是为了让你“多空一行”，而是表达“段落之间存在逻辑分隔”。强行用多个 <p></p> 堆出视觉空行，会破坏语义结构，导致屏幕阅读器重复播报、SEO 权重稀释、CSS 选择器失控。

• 错误写法：<p>第一句。</p> <p></p> <p>第二句。</p>
• 正确替代：用 margin-bottom 控制间距，或用 <br> 处理纯视觉换行（仅限极少数场景）
• 缩进必须用 CSS：text-indent: 2em，而非在开头加空格或  

<p></p> 里能放什么，不能放什么

<p></p> 是文本容器，只应包含行内内容（<span></span>、<strong></strong>、@#@#@#@#@#@#@#@#@#@0。

非法：<p>文字</p> <div>被截断的内容</div>后面文字消失（实际渲染中，<div> 会被踢到 <code><p></p> 外）

图片算行内元素，但需注意：若 <img> 单独成段，建议外层仍用 <p></p> 包裹，保持语义完整性

CSS 重置 <p></p> 间距的常见误区

很多人一上来就写 p { margin: 0; }，结果全站段落挤成一团。这不是“重置”，是“抹杀”——段落之间的呼吸感没了，可读性反而下降。

• 更稳妥的做法是统一控制相邻段落间距：p + p { margin-top: 0; }，保留首段上边距、后续段落只管下边距
• 需要不同密度时，用类名区分：<p class="p--tight">...</p> 配合 .p--tight { margin-bottom: 0.5em; }
• 注意 line-height 影响行内基线对齐，中文建议设为无单位数值（如 1.6），避免继承放大问题

真正难的不是写对 <p></p>，而是在 CMS 输出、富文本编辑器粘贴、Markdown 渲染等场景里，守住它的语义边界——只要段落被当成“样式占位符”用一次，后续维护成本就会指数级上升。