原生 rich-text 不支持 标签，会静默丢弃或降级为普通文本，无法保留等宽字体、背景色等样式；mp-html 可完整支持 渲染与语法高亮，手动模拟需用 替换并预处理 html 字符串。
原生 rich-text 不支持 <code> 标签渲染
微信小程序的 rich-text 组件从基础库 1.4.0 开始支持，但官方明确说明不支持 <code>、<pre class="brush:php;toolbar:false;"></pre>、<blockquote></blockquote> 等语义化富文本标签。传入含 <code> 的 HTML 字符串时，该标签会被静默丢弃或降级为普通文本，无法保留等宽字体、背景色、行号等关键样式。
这是因为 rich-text 内部采用节点映射机制（如把 <p></p> 映射为 <view></view>），而 <code> 不在白名单内，且没有对应 WXML 原生组件可承载其语义。
- 常见错误现象：
<code>console.log('hello')渲染后变成纯文本，无font-family: monospace效果，也无包裹容器 - 即使加了
style="font-family: 'Courier New', monospace;"，该行内样式在rich-text中大概率被忽略（仅部分基础 CSS 属性生效） - 使用
mode="compat"或mode="aggressive"也无法恢复<code>的结构，只会把它当普通文字塞进<view></view>
用 mp-html 替代：真正支持 <code> + 语法高亮
mp-html 是目前最成熟、全平台兼容的第三方富文本组件，对 <code> 标签有完整支持，包括自动识别语言、行内代码、代码块、行号、主题切换和点击复制。
它不是简单替换标签，而是将 <code> 解析为带 class 的 <view></view> 容器，并注入预设的 WXSS 样式（如 .hljs、.hljs-comment），再通过 wxs 做语法词法分析。
支持AI生成符合公众号规范的图文，推送至草稿箱；兼容其他技能生成的图文/图片。通过向导扫码授权，支持多账号；无需暴露Secret密钥或配置IP白名单。
- 安装后，在页面 JSON 中声明：
"usingComponents": { "mp-html": "mp-html/mp-html" } - WXML 中使用：
<mp-html content="{{htmlStr}}"></mp-html>，其中htmlStr可直接含<code class="js">const a = 1 - 默认启用高亮；若需关闭，传入
highlight="{{false}}"；自定义主题则覆盖mp-html/highlight.css中的变量 - 注意：不要在
content里混用<script></script>或onxxx行内事件——mp-html会主动过滤，这是安全策略，不是 bug
轻量场景下手动封装 <code>：用 <text></text> + class 模拟
如果项目已稳定、不想引入新组件，且只需展示简单行内代码（比如 <code>data-id="123"），可用 WXML 手动模拟，但必须绕开 WXSS 限制：
- WXSS 中禁止用
code标签选择器，所以不能写code { font-family: monospace; }，必须改用类名，例如：.inline-code { font-family: 'SF Mono', 'Consolas', monospace; background: #f5f5f5; padding: 0 4px; border-radius: 2px; } - HTML 数据中需提前把
<code>...替换为带 class 的<text class="inline-code">...</text>，这步必须在 JS 层做字符串处理或正则替换 - 注意转义：原始 HTML 中的
、<code>>、&要先转成<、>、&，否则 WXML 解析会出错 - 此法仅适用于静态、可控内容；动态 HTML 若含嵌套、属性、多行，极易漏解析，不推荐用于博客、文档类场景
html2wxml 转换器适合批量迁移，但不解决运行时问题
html2wxml 是一个编译期工具，把 HTML 文件一键转成 WXML + WXSS + JS 结构，其中 <code> 会被转为带 class="code-block" 的 <view></view> 并附带高亮逻辑。但它只适用于「内容固定、上线前一次性转换」的场景，比如产品介绍页、帮助中心静态文档。
如果你的数据来自 API（如 CMS 返回的 HTML 字段），就无法在构建时转换，此时 html2wxml 完全无效——它不提供运行时解析能力，也不生成可复用的组件。
容易被忽略的关键点：html2wxml 输出的 WXSS 依赖 @import 外部高亮样式，若你把生成的 WXML 直接 copy 进现有页面，却忘了引入 highlight.css 或配错路径，<code> 就只剩文字，毫无样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
