前言 | 微信公众号文档

# 前言

为保障微信公众平台编辑器功能的一致性与稳定性，提升用户在内容创作的流畅体验，特制定本开发规范。所有公众平台编辑器的第三方开发者，均应尽量遵循本规范中关于CSS属性、HTML文章结构与字体使用的相关规定。

注：文中代码均可在编辑器中运行查看实际效果。

# 1、API 检测接口

# 接口用途

按照下文规则，验证文章内容结构，帮助第三方开发者快速识别模版缺陷。

# 接口 URL

http://mp.weixin.qq.com/article-bin/verify_article_structure

# 请求方式

POST

# 请求参数

参数名	类型	必填	说明
content	string	是	需要验证的 HTML 字符串内容

# 请求示例

{
  "content": "<html><body><div style='height: 0;'>Invisible Element</div></body></html>"
}

# 响应参数

参数名	类型	说明
isValid	Boolean	表示验证结果。如果为 true，表示内容通过了验证；如果为 false，则表示存在问题
inValidInfo	Object	当 isValid 为 false 时，返回该字段，包含所有验证失败的详细信息

# inValidInfo(Object Payload)

属性名	类型	说明
height	Object	包含与高度相关的违规信息
width	Object	包含与宽度相关的违规信息
其他	Object	其他验证规则

# 以width为例

# witdh (Object Payload)

参数名	类型	说明
violateRules	String	描述具体的违规规则，例如"页面height设置错误，导致有元素不可见"
items	Array	列出所有与高度相关的违规元素。每个项都是一个对象

# items (Array of Object Payload)

参数名	类型	说明
outerHTML	String	违规元素的完整 HTML 标记字符串

# 响应示例

{
  "isValid": false,
  "inValidInfo": {
    "height": {
      "violateRules": "页面height设置错误，导致有元素不可见",
      "items": [
        {
          "outerHTML": "<div style='height: 0;'>Invisible Element</div>"
        }
      ]
    }
  }
}

# cURL 请求示例

下面是使用 cURL 命令发送请求的示例：

curl -X POST http://mp.weixin.qq.com/article-bin/verify_article_structure \
     -H "Content-Type: application/json" \
     -d '{
          "content": "<div>test></div>"
        }'

# 注意事项

●请确保发送的 HTML 内容是有效的 HTML 格式。

●根据不同的属性（如 height、width）可能会返回多个验证规则，具体视 HTML 内容而定。

# 2、CSS 属性使用规范

以下CSS属性的不当使用，会直接影响编辑器的功能或文章的最终呈现，请在开发中严格规避。

# 2.1 opacity

错误场景：

将 img 标签的 opacity 设置为 0 ，并将带背景图的SVG叠在同一位置

示例：

<section>
  <section style="line-height: 0;font-size: 0;height: 0;text-align: left;">
    <section style="display: inline-block;width:100%;transform-origin: top;">
      <span leaf="">
        <img src="https://mmbiz.qpic.cn/sz_mmbiz_png/WOsCxdtAXDtQWXtgKojxKdmZ4ic5UkzRMYqt9K5o6WmgwXQvAmkbnpfsicTglzzAhdjib7icSwVYS7WZiagJfUwDQVA/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=10005&amp;wx_lazy=1#imgIndex=0" data-src="https://mmbiz.qpic.cn/sz_mmbiz_png/WOsCxdtAXDtQWXtgKojxKdmZ4ic5UkzRMYqt9K5o6WmgwXQvAmkbnpfsicTglzzAhdjib7icSwVYS7WZiagJfUwDQVA/640?wx_fmt=png#imgIndex=0" alt="图片" data-ratio="0.7388888888888889" data-type="png" data-w="1080" style="width: 676.996px !important; pointer-events: painted; vertical-align: top; opacity: 0; height: auto !important; visibility: visible !important;" data-imgqrcoded="1" contenteditable="false"><img class="ProseMirror-separator" alt="">
        <br class="ProseMirror-trailingBreak">
      </span>
    </section>
  </section>
  <section>
    <svg icopr="" opacity="1" style="transform: scale(1); display: inline-block; vertical-align: top; width: 100%; background-image: url(&quot;https://mmbiz.qpic.cn/sz_mmbiz_png/WOsCxdtAXDtQWXtgKojxKdmZ4ic5UkzRMYqt9K5o6WmgwXQvAmkbnpfsicTglzzAhdjib7icSwVYS7WZiagJfUwDQVA/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=10015&amp;wx_lazy=1&quot;); background-size: 100% 100%; background-repeat: no-repeat; background-attachment: scroll; -webkit-tap-highlight-color: transparent; user-select: none;" viewBox="0 0 1080 798" data-lazy-bgimg="https://mmbiz.qpic.cn/sz_mmbiz_png/WOsCxdtAXDtQWXtgKojxKdmZ4ic5UkzRMYqt9K5o6WmgwXQvAmkbnpfsicTglzzAhdjib7icSwVYS7WZiagJfUwDQVA/640?wx_fmt=png" class="" role="img" aria-label="插图" data-fail="0"></svg>
  </section>
</section>

影响说明

导致发布后无法在公众号后台修改图片。因为实际显示的是SVG背景图，而公众号编辑器不支持修改SVG背景图。

# 2.2 caret-color

错误场景

将输入光标的颜色设置为完全透明

示例：

caret-color: rgba(0, 0, 0, 0);

影响说明

光标在编辑器中不可见，导致作者无法确定当前的输入位置，影响编辑体验。

# 2.3 line-height

错误场景

容器设置 line-height: 0

示例：

<div class="problem-box" style="line-height: 0;border: 1px solid #ffa39e;padding: 10px;background-color: #fff;">
  这是第一行文字<br>
  这是第二行文字<br>
  这是第三行文字
</div>

影响说明

行高设置为0会导致文字行重叠在一起，影响内容的可读性。

实际case中DOM结构会比较复杂，但本质都是因为设置line-height: 0

# 2.4 width

错误场景

容器设置固定宽度

示例：

<section style="border-style: solid;border-width: 1px;border-color: rgb(218, 29, 43);width: 586.438px;">
  <span style="letter-spacing: 0.8px; visibility: visible;">这是一个设置了固定宽度的段落。在宽屏上它会居左显示并留白，在窄屏上视觉呈现居中铺满。</span>
</section>

影响说明

固定宽度会破坏响应式布局，在不同尺寸屏幕下显示不一致。小屏幕可能刚好撑满，大屏幕则会留白并左对齐。

编辑器居中显示	PC端居左显示

# 2.5 height

错误场景

容器设置固定高度

示例：

<section>
  <section style="height: 0px;visibility: visible;"><section style="visibility: visible;">
    <section style="visibility: visible;">
      <p>
        <span leaf="">7月份，在以习近平同志为核心的党中央坚强领导下，各地区各部门认真贯彻落实党中央、国务院决策部署，坚持稳中求进工作总基调，完整准确全面贯彻新发展理念，加快构建新发展格局，加紧实施更加积极有为的宏观政策，纵深推进全国统一大市场建设，国民经济保持稳中有进发展态势，生产需求持续增长，就业物价总体稳定，新质生产力培育壮大，高质量发展取得新成效。                        </span>
      </p>
    </section>
    </section>
  </section>
</section>

影响说明

当容器高度设置为0px时，在编辑器环境中由于设置了外层容器的最小高度，内容仍可显示。但在移动端设备上无此设置，将导致内容完全不可见，造成页面空白问题。

编辑器	移动端

# 2.6 text-align

错误场景

设置text-align 为start，end

错误示例

<section style="text-align: center;">
   <span style="text-align: start;">看完了绚烂的灯光秀</span>
</section>

影响说明

不同终端对 start 值兼容性存在差异，造成部分设备文字居中、部分设备文字居左的不一致体验。

编辑器	IOS 18+

# 2.7 begin

错误场景

设置SVG动画animate的begin属性时仅设置了touchstart

错误示例

<svg id="svg-example" viewBox="0 0 200 200">
  <circle id="animated-circle" cx="100" cy="100" r="40">
    <animate attributeName="fill" values="#3498db; #e74c3c; #3498db" dur="1s" begin="touchstart">
    </animate>
  </circle>
</svg>

影响说明

仅设置 touchstart 事件会导致SVG动画在PC端无法触发，因为PC端使用鼠标点击（click）事件而非触摸事件。需同时设置 touchstart 和 click 事件，确保跨平台兼容性，即begin="touchstart; click"

# 2.8 pre

错误场景： 使用 <pre> 标签包裹普通段落文本内容。

错误示例：

<pre style="line-height: 1.75em; margin-bottom: 24px;">
  <span leaf="">
    <span textstyle="">这是一段普通的正文内容，不应该使用 pre 标签包裹。</span>
  </span>
</pre>

影响说明： <pre> 标签默认携带 white-space: pre 样式，文字不自动换行，在移动端窄屏下内容将被水平截断。

编辑器，正常显示	移动端，文字溢出

推荐做法： 普通段落文本应使用 <section> 或 <p> 标签替代。

# 3、文章结构类

为保证文章DOM树的清晰与编辑器的解析性能，文章结构需遵循以下基本规则。不符合规则的结构会被编辑器自动删除。

# 3.1 嵌套层级限制

规范要求

相同HTML标签的嵌套层级深度不应超过15层

错误示例

<div>
  <div>
    <div>
      <div>
        <div>
           <div>
              /*...(中间多层重复嵌套）*/
              <strong> hey </strong>
              ...
           </div>
        </div>
      </div>
    </div>
  </div>
</div>

# 3.2 span[leaf] 节点规范

规范要求

<span leaf> 节点为行内容器，其内部只能包含行内元素（如 span, strong, img 等）或文本节点，严禁包裹任何块级元素（如 section, div, p 等）。

错误示例

<span leaf>
  <section> 这是一个块级元素，禁止放入！ </section>
</span>

# 3.3 section[nodeleaf] 节点规范

规范要求

<section nodeleaf> 节点为特定功能容器，其内部只能包裹官方指定的特定组件或 img 图片元素。

错误示例

<section nodeleaf>
  <section> 这个块级元素不允许放在这里 </section>
</section>

# 4、字体使用规范

核心原则：不建议设置任何字体族（font-family）。

公众号已设定一套经过充分优化的默认字体栈，旨在统一字体在创作端（编辑器）与阅读端（iOS、安卓）一致的视觉体验。任何自定义字体设置都可能破坏此一致性。

默认字体栈

font-family: "mp-quote", PingFang SC, system-ui, -apple-system, BlinkMacSystemFont, Helvetica Neue, Hiragino Sans GB, Microsoft YaHei UI, Microsoft YaHei, Arial, sans-serif;

错误示例：

<!-- 段落1：使用了一套字体栈 -->
<section style="font-family: 'mp-quote', 'system-ui', 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', Helvetica, Arial, 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', 'Source Han Sans CN', sans-serif;">
  第一段落：这段文字在编辑器里看起来正常。
</section>

<!-- 段落2：使用了另一套（官方默认）字体栈 -->
<section style="font-family: 'mp-quote', PingFang SC, system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Hiragino Sans GB, 'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif">
  第二段落：这段文字在编辑器里看起来和第一段一样。
</section>

效果与影响：

环境	表现
公众号编辑器	两段文字视觉一致，无法察觉问题。
iOS 17+ 部分版本	两段文字因分别映射到 system-ui 和 PingFang SC 的同一字体不同版本，使得实际渲染后的文字大小和字间距上较为明显

编辑器	iOS 17+ 部分版本

# 5、Dark Mode

微信公众平台 Dark Mode 转换算法秉承尽可能保留原文信息的原则（颜色也是一种信息，我们不会将红色转成橙色），仅当信息在 Dark Mode 下看不清（对比度不够）或看得不舒服（亮度太高）时才进行调整。

因此，如果创作者的内容调校得足够好，那么它在 Dark Mode 下将会获得更好的阅读体验，而这也正是本规范的愿景。

接下来将会从「颜色」、「结构」、「图片」、「SVG」和「排版技巧 & 注意事项」五个维度分别阐述。

# 5.1 颜色

# 5.1.1 使用对比度适中的颜色

尽管平台对颜色方面没有任何的限制，但是为了让文本在 Dark Mode 下看得更清楚、看得更舒服，算法会检测文本和背景的对比度，如果过低或过高，会进行相应的平衡调整。

<!-- 错误示例 -->
<div style="background-color: rgb(194, 43, 76); color: rgb(73, 68, 41);">文本和背景的对比度较低，看不清</div>

<!-- 推荐示例 -->
<div style="background-color: rgb(194, 43, 76); color: rgb(73, 68, 41);">调高文本的亮度，使之可看清</div>

# 5.1.2 如非必要，文字背景尽量不要使用渐变

先用 css 定义一个简单的渐变，比如 background-image: linear-gradient(rgb(248, 245, 247), rgb(194, 43, 76)) ，表示从白色渐变到红色。

如果只是简单对渐变的两个颜色进行算法转换的话，算法无法保证渐变过程中的颜色是否能在 Dark Mode 下保持良好的阅读体验（想象一下如果这个渐变有透明度，而渐变背后还有其他的渐变背景色，或者渐变上方有带有渐变的文本，就有可能导致文本不可阅读了），因此算法会先对渐变进行 mix 混合计算，将渐变转换成纯色，再进行算法转换，来减少不确定性。

<!-- 在 Dark Mode 下渐变背景会被转成纯色背景 -->
<div style="background-image: linear-gradient(rgb(248, 245, 247), rgb(194, 43, 76)); color: yellow;">文字背景为白到红的渐变色</div>

下面这个 bad case 也是由渐变带来的，由于使用了渐变来实现格子背景，所以在 Dark Mode 下没有了格子背景。

<!-- 在 Dark Mode 下渐变格子背景会消失 -->
<div style="background-color: rgb(248, 251, 248); background-image: linear-gradient(rgba(180, 190, 185, 0.3) 1px, transparent 1px), linear-gradient(90deg, rgba(180, 190, 185, 0.3) 1px, transparent 1px); background-size: 20px 20px; color: rgb(51, 51, 51);">有格子背景</div>

# 5.1.3 纯背景可以使用渐变

渐变背景上方如果没有文字的话，算法将不会对该渐变做处理。

<!-- 在 Dark Mode 下纯渐变背景会被保留 -->
<div style="background-image: linear-gradient(rgb(248, 245, 247), rgb(194, 43, 76));"><br></div>

# 5.2 结构

# 5.2.1 建议使用背景容器 + 多文本节点的结构

如果需要给多个文本添加同一个背景（背景颜色或渐变），建议将这些文本节点包裹在一个容器里，背景样式写到这个容器上，而非给每个文本节点添加相同的背景样式。这样既可以提高算法性能，减少重复计算，也可以避免以下 bad case。

<!-- 错误示例 -->
<div style="color: #191919;">
  <div style="background-image: -webkit-linear-gradient(left, rgb(238, 236, 225), rgb(146, 208, 80));">渐变样式写在文本节点上</div>
  <div style="background-image: -webkit-linear-gradient(left, rgb(238, 236, 225), rgb(146, 208, 80));"><br></div>
  <div style="background-image: -webkit-linear-gradient(left, rgb(238, 236, 225), rgb(146, 208, 80));">两个文本中间有一个没有文本的空结点</div>
</div>

正确的做法是把背景样式写在容器上。

<!-- 推荐示例 -->
<div style="color: #191919; background-image: -webkit-linear-gradient(left, rgb(238, 236, 225), rgb(146, 208, 80));">
  <div>渐变样式写在容器上</div>
  <div><br></div>
  <div>两个文本中间有一个没有文本的空结点</div>
</div>

# 5.2.2 保持正确的嵌套关系

由于算法是深度优先遍历（可以简单理解为跟视觉顺序一致，自上而下，从左至右），因此，切忌使用绝对定位或变形等手段破坏视觉与结构顺序的一致性（比如将结构上靠前的节点通过绝对定位挪到后面，抑或是将文本定位到没有从属关系的背景色区域）。

<!-- 错误示例 -->
<div style="position: relative;">
  <div style="position: absolute; width: 100%; top: 0; left: 0; color: rgb(209, 167, 174);">绝对定位文本，和背景色节点没有嵌套关系</div>
  <div style="background-color: rgb(246, 212, 218);"><br></div>
  <div style="background-color: rgb(246, 212, 218);">
    <div style="color: rgb(209, 167, 174);">正确嵌套的文本</div>
  </div>
</div>

<!-- 推荐示例 -->
<div style="position: relative;">
  <div style="position: absolute; width: 100%; top: 0; left: 0; color: rgb(209, 167, 174);">绝对定位文本，无法看清 ❌</div>
  <div style="background-color: rgb(246, 212, 218);"><br></div>
  <div style="background-color: rgb(246, 212, 218);">
    <div style="color: rgb(209, 167, 174);">正确嵌套的文本，可清晰看见 ✅</div>
  </div>
</div>

# 5.3 图片

# 5.3.1 如非必要，不要使用图片来承载纯文本

出于对性能方面的考虑，算法目前没有对图片进行内容识别，因此无法提取图片中的文本做转换，并且也不建议使用图片来承载纯文本。

<!-- 错误示例 -->
<img src="https://res.wx.qq.com/op_res/-RQUEx4qQYTKZjQJ6rwd0uEgp0_O1rf6XIlaKJDcwz5uLkVMMhY0NIY1QDrpdTn4KBmzbno_Rr0fGyjkINKIcA">
<div>上面是一张白底图片，有一个浅蓝色文字"答"</div>

# 5.3.2 谨慎使用透明底色图片

创作过程中免不了会使用到透明底色图片，但需要注意的是，如果图片中使用到了黑色相关的颜色，需要注意在 Dark Mode 下是否和正文的黑底 #191919 有足够的对比度，否则会无法看清。

<!-- 错误示例 -->
<img src="https://res.wx.qq.com/op_res/-RQUEx4qQYTKZjQJ6rwd0r846GT72PhOS1V6xroBB18NDux7e2OnLqJY4NZOQBGcNK3PjiS4GykfmtNKIytvRA">
<div>上面是一张有"黑灰"两个字的透明底色图片</div>

# 5.3.3 简单了解一下背景图片的补色机制

注意，这里特指背景图片，即 background-image 而非 <img>，顺带一说，背景图片上方的文字颜色会保留 Light Mode 原色。

我们注意到，有些创作者会在文字底部加背景图片做装饰（比如条纹、网格），当这些背景图片是透明底色时，可能会导致文字无法阅读，因此算法对背景图片加上了独特的"补色"机制。

<!-- 图片补色 -->
<div style="height: 60px; border: 1px solid #ccc; color: #191919; background-image: url('https://res.wx.qq.com/op_res/-RQUEx4qQYTKZjQJ6rwd0s2g6U3GFpYzgQyhYK-Orj3-kANd6Mw1pFFZqgSOO8I6i4Shu7CIce27j8sR9n_9OA'); background-repeat: repeat; background-size: 46.5212%; background-position: 0% 0%;">文字下方有透明底色灰色条纹背景图片</div>
<div>先看看没有补色机制时的表现</div>
<div style="height: 60px; border: 1px solid #ccc; color: #191919; background-image: url('https://res.wx.qq.com/op_res/-RQUEx4qQYTKZjQJ6rwd0s2g6U3GFpYzgQyhYK-Orj3-kANd6Mw1pFFZqgSOO8I6i4Shu7CIce27j8sR9n_9OA'); background-repeat: repeat; background-size: 46.5212%; background-position: 0% 0%;">文字下方有透明底色灰色条纹背景图片</div>
<div>再看看有补色机制时的表现1</div>
<div style="display: flex; justify-content: center; align-items: center; gap: 4px;">
  <div style="width: 80px; height: 20px; transform: rotateY(180deg); background-image: url('https://res.wx.qq.com/op_res/-RQUEx4qQYTKZjQJ6rwd0spd1qMZfVjFkyvRaLOoR-0lnL7HWXkdCu4FLfVW8-DoJtPd4gGoXmpbS_5Kcv_tIw'); background-repeat: no-repeat; background-size: contain; background-position: 50% 50%;"></div>
  <div style="color: rgb(203, 160, 121);">两侧是透明底色背景图片</div>
  <div style="width: 80px; height: 20px; background-image: url('https://res.wx.qq.com/op_res/-RQUEx4qQYTKZjQJ6rwd0spd1qMZfVjFkyvRaLOoR-0lnL7HWXkdCu4FLfVW8-DoJtPd4gGoXmpbS_5Kcv_tIw'); background-repeat: no-repeat; background-size: contain; background-position: 50% 50%;"></div>
</div>

补色机制的具体细节（如何检测文字、补什么颜色等等）就不在这里赘述了，感兴趣的话可以看算法源码。

# 5.4 SVG

# 5.4.1 如非必要，不要使用图片来承载纯文本

算法目前不会对 SVG 进行处理，绝大部分 SVG 在 Dark Mode 下都和 Light Mode 表现一致。

但也因此，会出现以下 bad case。

<!-- SVG bad case -->
<div>有些时候，创作者会使用 SVG 来显示公式：</div>
<div>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -738.9 3084.7 1084.9" aria-hidden="true" style="vertical-align: -0.783ex;width: 6.979ex;height: 2.455ex;" role="img" aria-label="插图"><g stroke="black" fill="black" stroke-width="0" transform="matrix(1 0 0 -1 0 0)"><g data-mml-node="math"><g data-mml-node="mi"><path data-c="63" d="M34 159Q34 268 120 355T306 442Q362 442 394 418T427 355Q427 326 408 306T360 285Q341 285 330 295T319 325T330 359T352 380T366 386H367Q367 388 361 392T340 400T306 404Q276 404 249 390Q228 381 206 359Q162 315 142 235T121 119Q121 73 147 50Q169 26 205 26H209Q321 26 394 111Q403 121 406 121Q410 121 419 112T429 98T420 83T391 55T346 25T282 0T202 -11Q127 -11 81 37T34 159Z"></path></g><g data-mml-node="mo" transform="translate(710.8, 0)"><path data-c="2208" d="M84 250Q84 372 166 450T360 539Q361 539 377 539T419 540T469 540H568Q583 532 583 520Q583 511 570 501L466 500Q355 499 329 494Q280 482 242 458T183 409T147 354T129 306T124 272V270H568Q583 262 583 250T568 230H124V228Q124 207 134 177T167 112T231 48T328 7Q355 1 466 0H570Q583 -10 583 -20Q583 -32 568 -40H471Q464 -40 446 -40T417 -41Q262 -41 172 45Q84 127 84 250Z"></path></g><g data-mml-node="msubsup" transform="translate(1655.6, 0)"><g data-mml-node="TeXAtom" data-mjx-texclass="ORD"><g data-mml-node="mi"><path data-c="5A" d="M39 -1Q29 9 29 12Q29 23 60 77T219 337L410 648H364Q261 648 210 628Q168 612 142 588T109 545T97 509T88 490Q85 489 80 489Q72 489 61 503L70 588Q72 607 75 628T79 662T81 675Q84 677 88 681Q90 683 341 683H592Q604 673 604 666Q604 662 412 348L221 37Q221 35 301 35Q406 35 446 48Q504 68 543 111T597 212Q602 239 617 239Q624 239 629 234T635 223Q635 215 621 113T604 8L597 1Q595 -1 317 -1H39ZM148 637L166 648H112V632Q111 629 110 622T108 612Q108 608 110 608T116 612T129 623T148 637ZM552 646Q552 648 504 648Q452 648 450 643Q448 639 266 343T77 37Q77 35 128 35H179L366 339L552 646ZM572 35Q581 89 581 97L561 77Q542 59 526 48L508 37L539 35H572Z"></path></g></g><g data-mml-node="TeXAtom" transform="translate(667, 410.1) scale(0.707)" data-mjx-texclass="ORD"><g data-mml-node="mo"><path data-c="2217" d="M229 286Q216 420 216 436Q216 454 240 464Q241 464 245 464T251 465Q263 464 273 456T283 436Q283 419 277 356T270 286L328 328Q384 369 389 372T399 375Q412 375 423 365T435 338Q435 325 425 315Q420 312 357 282T289 250L355 219L425 184Q434 175 434 161Q434 146 425 136T401 125Q393 125 383 131T328 171L270 213Q283 79 283 63Q283 53 276 44T250 35Q231 35 224 44T216 63Q216 80 222 143T229 213L171 171Q115 130 110 127Q106 124 100 124Q87 124 76 134T64 161Q64 166 64 169T67 175T72 181T81 188T94 195T113 204T138 215T170 230T210 250L74 315Q65 324 65 338Q65 353 74 363T98 374Q106 374 116 368T171 328L229 286Z"></path></g></g><g data-mml-node="TeXAtom" transform="translate(667, -338.3) scale(0.707)" data-mjx-texclass="ORD"><g data-mml-node="msup"><g data-mml-node="mi"><path data-c="6E" d="M21 287Q22 293 24 303T36 341T56 388T89 425T135 442Q171 442 195 424T225 390T231 369Q231 367 232 367L243 378Q304 442 382 442Q436 442 469 415T503 336T465 179T427 52Q427 26 444 26Q450 26 453 27Q482 32 505 65T540 145Q542 153 560 153Q580 153 580 145Q580 144 576 130Q568 101 554 73T508 17T439 -10Q392 -10 371 17T350 73Q350 92 386 193T423 345Q423 404 379 404H374Q288 404 229 303L222 291L189 157Q156 26 151 16Q138 -11 108 -11Q95 -11 87 -5T76 7T74 17Q74 30 112 180T152 343Q153 348 153 366Q153 405 129 405Q91 405 66 305Q60 285 60 284Q58 278 41 278H27Q21 284 21 287Z"></path></g><g data-mml-node="TeXAtom" transform="translate(600, 363) scale(0.714)" data-mjx-texclass="ORD"><g data-mml-node="mn"><path data-c="32" d="M109 429Q82 429 66 447T50 491Q50 562 103 614T235 666Q326 666 387 610T449 465Q449 422 429 383T381 315T301 241Q265 210 201 149L142 93L218 92Q375 92 385 97Q392 99 409 186V189H449V186Q448 183 436 95T421 3V0H50V19V31Q50 38 56 46T86 81Q115 113 136 137Q145 147 170 174T204 211T233 244T261 278T284 308T305 340T320 369T333 401T340 431T343 464Q343 527 309 573T212 619Q179 619 154 602T119 569T109 550Q109 549 114 549Q132 549 151 535T170 489Q170 464 154 447T109 429Z"></path></g></g></g></g></g></g></g></svg>
</div>

想要规避上述 bad case，可以指定 stroke="currentColor" fill="currentColor"，或者加上底色。

# 5.5 排版技巧 & 注意事项

# 5.5.1 指定节点跳过算法转换

可以使用 data-no-dark 属性来指定当前节点跳过算法转换，但仅针对当前节点生效，其后代节点如果有内联样式，依然会进行算法转换。

<ul style="color: #000;" data-no-dark>
  <li>这是黑色字体</li>
  <li style="color: #000;">这也是黑色字体，但是有style="color: #000;"</li>
</ul>

# 5.5.2 不要使用 `!important`

无论是什么场景，我们都不建议创作者在排版时使用 !important，这会使平台添加的公共样式失效，并且 Dark Mode 算法也需要搭配 !important 来实现样式覆盖。

本规范将持续更新，请开发者密切关注最新版本，确保插件功能与平台标准保持一致。

# 前言

# 1、API 检测接口

# 接口用途

# 接口 URL

# 请求方式

# 请求参数

# 请求示例

# 响应参数

# inValidInfo(Object Payload)

# 以width为例

# witdh (Object Payload)

# items (Array of Object Payload)

# 响应示例

# cURL 请求示例

# 注意事项

# 2、CSS 属性使用规范

# 2.1 opacity

# 2.2 caret-color

# 2.3 line-height

# 2.4 width

# 2.5 height

# 2.6 text-align

# 2.7 begin

# 2.8 pre

# 3、文章结构类

# 3.1 嵌套层级限制

# 3.2 span[leaf] 节点规范

# 3.3 section[nodeleaf] 节点规范

# 4、字体使用规范

# 5、Dark Mode

# 5.1 颜色

# 5.1.1 使用对比度适中的颜色

# 5.1.2 如非必要，文字背景尽量不要使用渐变

# 5.1.3 纯背景可以使用渐变

# 5.2 结构

# 5.2.1 建议使用背景容器 + 多文本节点的结构

# 5.2.2 保持正确的嵌套关系

# 5.3 图片

# 5.3.1 如非必要，不要使用图片来承载纯文本

# 5.3.2 谨慎使用透明底色图片

# 5.3.3 简单了解一下背景图片的补色机制

# 5.4 SVG

# 5.4.1 如非必要，不要使用图片来承载纯文本

# 5.5 排版技巧 & 注意事项

# 5.5.1 指定节点跳过算法转换

# 5.5.2 不要使用 !important

# 5.5.2 不要使用 `!important`