直接放不会破坏ol序号结构，但需转义特殊字符、设white-space: nowrap;，长代码必须用组合并控制max-width和margin以避免错位。
ol 里直接放 标签会折行错乱吗
不会破坏序号结构，但默认样式会让单行代码挤在文字里看不清，尤其含空格或符号时容易被误解析。浏览器把 当作行内元素，<ol> 和 <li> 容器本身不干预它的换行行为——所以问题出在样式和内容转义，不是语义错误。</li>
</ol>
<code> 必须只包裹纯代码字符，别套整个说明句（比如不要 <pre class="brush:php;toolbar:false;"><code>点击按钮执行 <script>alert(1)</script></code>）</pre>- 含 、& 的代码必须转义：
<div> 要写成 <code><div>，否则被当 HTML 标签吃掉 <li>单行代码建议加 <code>white-space: nowrap;防止断词，配合overflow-x: auto;横向滚动 -
<pre class="brush:php;toolbar:false;"></pre>保留原始换行与空格，<code>提供语义和基础字体样式，二者缺一不可 - 要控制宽度防止撑破容器：给
<pre class="brush:php;toolbar:false;"></pre>加max-width: 100%;和overflow-x: auto; - 别给
<pre class="brush:php;toolbar:false;"></pre>设display: block;——它本来就是块级，再设会导致 - 行高异常、序号和内容错位
- 对
ol li pre单独设margin: 0;和line-height: 1.4; - 确保
font-family显式声明为等宽字体：font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; - 加轻量背景和内边距提升可读性：
background-color: #f6f6f6;+padding: 4px 8px; - 如果代码行数太多，考虑用
max-height: 200px;+overflow-y: auto;限制高度 - 时遇到 insertBefore 报错怎么办
错误信息
Uncaught DOMException: Failed to execute 'insertBefore' on 'Node'不是- 的锅，是你 JS 插入字符串时没处理好节点类型。
- 别用
innerHTML += '<li><pre class="brush:php;toolbar:false;"><code>console.log()</code></pre></li>'拼接——用户输入未转义就炸 - 正确做法：先
document.createElement('li')，再li.appendChild(document.createElement('pre'))，逐层 appendChild 子节点 - React 用户注意：
{`<code>fetch()`} 是错的，得写成{<code>fetch()}（JSX 元素），别用字符串插值
font-family缺失导致 Windows 下回退到宋体，以及<pre class="brush:php;toolbar:false;"></pre>的 margin 对齐问题——这两处不调，再长的代码贴进去也像没修过的毛坯。 - 别用
长代码（多行/缩进敏感）该用
必须用 <pre class="brush:php;toolbar:false;"><code>...</code></pre> 组合。只用 <code><code> 会丢失换行、合并空格、破坏缩进——比如 JSON 或 Python 片段直接失效。
在 里嵌套 <pre class="brush:php;toolbar:false;"> 怎么避免序号对不齐
<pre class="brush:php;toolbar:false;"> 怎么避免序号对不齐
根本原因是 <pre class="brush:php;toolbar:false;"> 默认 <code>margin</code> 和 <code>line-height</code> 太大，压得编号下沉。不靠重置全局样式，而是精准压制容器内的表现。</pre>
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
