标签在webview中无默认样式，需内联css显式定义font-family、背景、内边距等；android对monospace支持不稳定，应指定sf mono/consolas等回退字体，ios需重置font-weight为normal。
code 标签在 React Native WebView 中无法渲染的常见原因
HTML 的 <code> 标签本身是语义化标签，不带默认样式，在 WebView 里常被直接“无视”——文字没变等宽、没背景、没边距，看起来和普通 <span></span> 没区别。这不是 bug，是预期行为：WebView（尤其 Android 的 System WebView）默认 CSS 重置极简，<code> 无 UA 样式兜底。
真正起作用的是 CSS。必须显式定义 font-family、background-color、padding 等，否则它只是个空壳。
- Android WebView（尤其旧版本）对
font-family: monospace支持不稳定，建议 fallback 到具体字体如'SF Mono', 'Consolas', 'monospace' - iOS WKWebView 对
<code>的 UA 样式稍友好，但依然依赖系统字体链，font-weight可能意外加粗，需重置为normal - 不要依赖外部 CSS 文件加载顺序——内联
<style></style>最可靠
如何用纯 HTML/CSS 实现跨平台一致的 code 块效果
不用 JS 注入，不依赖框架组件，靠 HTML + 内联 CSS 就能覆盖绝大多数场景。关键是把样式写死在 <style></style> 里，并针对 <code> 和 <pre class="brush:php;toolbar:false;"><code></code> 分开处理。</pre>
示例最小可用片段：
<style>
code {
font-family: 'SF Mono', 'Segoe UI Mono', 'Consolas', 'monospace';
font-size: 0.9em;
background-color: #f6f6f6;
padding: 0.2em 0.4em;
border-radius: 3px;
color: #333;
}
pre code {
display: block;
padding: 1em;
overflow-x: auto;
white-space: pre;
background-color: #2d2d2d;
color: #f8f8f2;
border-radius: 4px;
}
</style><p>调用方法：<code>fetch('/api')</code>，注意 headers 必须包含 <code>Content-Type</code>。</p>
<pre class="brush:php;toolbar:false;"><code>const response = await fetch('/api', {
method: 'POST',
headers: { 'Content-Type': 'application/json' }
});</code>
-
pre code单独设display: block，否则换行和缩进会塌陷 -
overflow-x: auto必加，长代码行才可横向滚动（iOS/Android WebView 均支持） - 深色背景配浅色文字时，避免用
font-weight: bold——某些 Android 字体渲染会糊掉
React Native 中使用 html 属性渲染时的特殊处理
如果用 react-native-webview 的 source={{ html: '...' }} 方式加载说明页，HTML 字符串里不能出现未转义的 或 <code>>；但更隐蔽的问题是：JSX 里写多行字符串易误触模板解析，比如 {`<code>...`} 中的反引号内容可能被 Babel 提前处理。
- 推荐将完整 HTML 字符串存在独立
.html文件中，用require('./doc.html')加载（Metro 支持），避免字符串拼接出错 - 若必须内联，用
String.raw包裹，防止换行符或反斜杠被转义：{String.raw`<code>console.log('x')`} - 别在
<code>里嵌套<br>——它无效；换行靠white-space: pre或pre-wrap控制
移动端 WebView 中 code 标签的性能与可访问性注意点
看似轻量的 <code> 在低端 Android 设备上也可能引发重排或渲染卡顿，尤其当页面含大量 inline code 片段时。同时，屏幕阅读器对 <code> 的朗读行为不统一，部分会跳过，部分会读作“code”，但不会自动说明这是命令或变量名。
- 避免在长列表项中高频使用
<code>——改用 class 标记（如<span class="inline-code"></span>），CSS 复用样式，减少 DOM 节点语义负担 - 对关键代码片段补充
aria-label，例如：<code aria-label="JavaScript fetch 函数调用">fetch() - 不要给
<code>加user-select: none——用户需要复制调试，禁用选择会破坏基础交互
最常被忽略的一点：字体加载失败时，monospace fallback 链里没有系统默认等宽字体（如 Android 的 Droid Sans Mono），会导致字号突变或字形错乱。务必在 font-family 最末尾保留 monospace，且不加引号。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
