code标签本身不支持行高亮，必须依赖pre+code嵌套结构及highlight.js等外部机制；需正确转义、脚本时机、插件初始化和css覆盖，缺一不可。
code 标签本身不支持行高亮
code 是纯语义标签，只声明“这是代码”，不带任何样式或高亮能力。它既不能标记某一行、也不能加背景色、更不会响应 data-line 或 highlight-lines 这类自定义属性——浏览器原生无视这些。所谓“高亮某几行”，必须依赖外部机制，不是 code 自己能干的事。
pre code 嵌套结构 + highlight.js 才能实现行高亮
真正起作用的是 <pre class="brush:php;toolbar:false;"><code></code> 组合，配合 highlight.js 的行号插件（<code>highlightjs-line-numbers.js</code>）或自定义 CSS 类。但注意：highlight.js 默认不提供行高亮，得手动扩展。</pre>
- 必须用
<pre class="brush:php;toolbar:false;"><code class="js">...</code></pre>，不能只用 <code>code - 高亮指定行需在
code标签上加data-highlighted-lines="2,5-7"这类属性（非标准，但插件认） - 要引入额外 JS 插件，比如：
highlightjs-line-numbers.js，且必须在highlightAll()之后调用其初始化函数 - 插件通常要求 DOM 已就绪、代码已渲染、且
highlightAll()已执行完毕，否则属性读不到
容易踩的坑：转义、顺序、时机全错就白配
即使写了 data-highlighted-lines="3"，下面任意一条出错，高亮都会消失：
<pre class="brush:php;toolbar:false;"><code></code> 里含未转义的 <code> 或 <code>></code> → 浏览器提前解析成标签，DOM 结构断裂，插件找不到目标节点</code></pre>-
highlight.js脚本放在里直接调hljs.highlightAll()→ 此时pre code还没加载，插件扫不到元素 - 用了
highlightjs-line-numbers.js却没调它的hljs.initLineNumbersOnLoad()或等价方法 → 行号和高亮逻辑根本没启动 - CSS 没覆盖到插件生成的
.hljs-ln-line.hljs-ln-highlighted类 → 看得到行号，但没背景色
替代方案：用 CSS 伪元素 + 行号容器更可控
如果不想引入额外插件，可以手动给 pre 加行号，再用 CSS 定位高亮行。例如：
<pre class="brush:php;toolbar:false;">
<code class="css">body {<br> margin: 0;<br> padding: 1rem;<br>}</code>
然后用 JS 把 code 内容按 \n 拆成 span 行容器，再给第 2 行加 class="highlight"；最后靠 CSS 控制背景色。这种方式绕过所有插件兼容性问题，但要求你控制代码块内容来源——动态插入或用户粘贴的 HTML 必须先转义，否则 <span></span> 会被当真实标签解析。
data-line="3" 就能高亮，却忘了整个链条里：结构要对、字符要转、脚本要晚、CSS 要配、插件要启——漏掉任一环，那行就安静地待在那儿，连影子都没有。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
