标签本身不显示高亮，因其仅为语义标签，浏览器仅默认赋予等宽字体和微小间距，无背景、边框或语法着色；需配合class与css或highlight.js等工具手动实现。
行内代码高亮不能靠 class 自动触发，必须配合 CSS 样式或 JavaScript 手动处理；原生 HTML 没有内置“代码高亮”语义，<code> 只是语义标签，不带样式。
为什么 <code> 标签本身不显示高亮
<code> 是纯语义标签，浏览器默认只加等宽字体和轻微上下间距，没有任何背景色、边框或语法着色。它不解析内容是否为 JS/Python，也不自动识别关键字——这和 Markdown 渲染器或编辑器里的实时高亮完全不是一回事。
- 常见错误现象：
<code>let x = 1;在页面上只是灰扑扑一行等宽字，毫无高亮 - 使用场景：写技术文档、API 示例、博客中的短代码片段（非整块代码块）
- 关键点：
<code>必须搭配class（如class="js"）+ 外部高亮库（如 highlight.js）或自定义 CSS 才能生效
用 CSS 实现最简行内高亮（无依赖）
适合单语言、少量关键词的轻量需求，比如把 console.log、fetch 这类固定词加颜色，不涉及括号、字符串、注释等复杂语法。
- 给行内代码加 class：
<code class="inline-js">console.log('hello') - 在 CSS 中手动匹配关键词（注意：需用
white-space: pre保空格）：.inline-js { font-family: ui-monospace, 'SFMono-Regular', monospace; background: #f6f8fa; padding: 2px 4px; border-radius: 3px; } .inline-js::before { content: "js"; font-size: 0.7em; color: #6a737d; margin-right: 4px; } /* 关键词着色（需逐个写） */ .inline-js[data-keywords~="console"] { color: #005cc5; } .inline-js[data-keywords~="log"] { color: #005cc5; } .inline-js[data-keywords~="fetch"] { color: #248bd2; } - 缺点明显：无法处理嵌套、引号内字符串、正则表达式等；
data-keywords需 JS 预处理注入，纯 CSS 无法动态提取关键词
用 highlight.js 实现行内语法高亮（推荐）
这是目前最可靠、兼容性最好、支持语言最多的方式。highlight.js 支持 <code> 标签的行内模式，但必须满足两个硬条件：指定语言 class + 调用 highlightElement()。
- HTML 写法（注意 class 命名规范）：
<code class="javascript">const a = [1, 2];（不能写成class="js"或lang="js"） - JS 初始化（必须等 DOM 加载完）：
document.querySelectorAll('code[class^="language-"]').forEach((block) => { hljs.highlightElement(block); }); - 容易踩的坑：
- 漏掉
class="xxx"中的language-前缀 → 高亮完全不触发 - 在
里直接调用hljs.highlightAll()→ DOM 还没生成，找不到元素 - 用了
highlightAuto()→ 行内短代码极易误判成其他语言（比如123被当数字常量，不触发任何高亮）
- 漏掉
行内高亮与代码块高亮的区别在哪
核心差异在渲染粒度和性能预期。行内代码（<code>）默认是文本流一部分，不能换行、不能滚动、不能加行号；而代码块（<pre class="brush:php;toolbar:false;"><code></code>）是独立块级容器，支持完整语法树解析。</pre>
- 性能影响：对 100+ 个
<code>标签调用highlightElement()，比单个<pre class="brush:php;toolbar:false;"><code></code> 慢约 3–5 倍（因每次都要构建 AST 子树）</pre> - 兼容性注意：部分老版本 highlight.js（prism-inline-coloring
- 真实限制：所有方案都无法在行内代码中正确高亮多行字符串、模板字面量（
`...${x}...`）、JSX 标签——这些必须放进<pre class="brush:php;toolbar:false;"><code></code> 块中</pre>
真正难的不是加 class 或引入库，而是判断哪些内容值得高亮：一个 setTimeout 单词加蓝色意义不大，但整句 fetch('/api').then(r => r.json()) 就需要完整语法树。别为了“看起来高级”把所有 <code> 都塞进 highlight.js —— 简单场景，CSS 就够了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
