Wechat Article Html

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

下载

最轻量可控的 text-indent 复用方式是定义 .indent 类统一控制缩进量；避免全局 p 选择器污染，响应式需分层类覆盖，Flex/Grid 中失效时宜改用 padding-left 替代。

text-indent 本身不支持直接“复用”——它必须配合 CSS 类或选择器才能批量生效。硬写内联样式 style="text-indent: 2em" 每次都要重复，既难维护也不响应变化。

用类名统一控制缩进量

最轻量、最可控的复用方式：定义一个通用类，在需要缩进的 <p></p> 上加 class="indent"。

常见错误是把类名写成 .p-indent 或 .paragraph-indent——太长且语义冗余；.indent 简洁明确，也方便后续扩展（比如 .indent-sm、.indent-none）。

• 在 CSS 中声明：.indent { text-indent: 2em; }
• HTML 中使用：<p class="indent">首行会缩进</p>
• 若某段落不需要缩进，加 .indent-none { text-indent: 0 !important; } 覆盖即可

避免用标签选择器全局污染

写 p { text-indent: 2em; } 看似省事，但极易引发意外缩进：

• 富文本编辑器输出的 <p></p> 可能嵌在 <div contenteditable> 里，你无法控制其结构 <li>第三方组件（如评论框、表单提示）里的 <code><p></p> 也会被强制缩进，破坏 UI 节奏
• 打印样式或暗色模式切换时，全局规则难以按需关闭

响应式缩进要单独抽离类

移动端缩进 2em 显得过大，但直接改 .indent 会影响桌面端。正确做法是分层控制：

• 基础类保持固定值：.indent { text-indent: 2em; }
• 响应式类只覆盖必要断点：@media (max-width: 768px) { .indent-mobile { text-indent: 1.5em; } }
• HTML 中组合使用：<p class="indent indent-mobile"></p>，靠层叠顺序生效
• 不推荐用 text-indent: 2% —— 它按容器宽度算，窄屏下可能缩进不足 1ch，视觉上等于没缩

Flex/Grid 容器中缩进失效时别硬扛

当 <p></p> 套在 display: flex 的卡片或导航栏里，text-indent 很大概率失效——这不是 bug，是格式化上下文切换导致的。

此时强行加 display: block 可能修复，但更稳的复用方案是换思路：

• 统一用 padding-left 替代：.indent-safe { padding-left: 2em; }
• 它对 flex item、grid item、inline-block 全部有效，且不依赖“首行”语义
• 若项目里大量存在这类场景，建议默认用 .indent-safe，仅在纯文档流段落中保留 .indent

真正容易被忽略的是：缩进类是否和字体设置耦合。比如用了 text-indent: 2ch，但某些中文字体不支持 ch 单位（IE 和部分旧 Android WebView），结果整站缩进消失——这种兼容性陷阱，比写错单位更难排查。