不生效。data-line-numbers仅控制行号显示，不提供高亮；需用CSS选择.data-line属性或JS动态添加class实现高亮，且必须依赖Prism生成的带行标识的语义化DOM结构。
Prism.js 中用 data-line-numbers 指定高亮行是否生效？
不生效。Prism 的 data-line-numbers 属性只控制「哪些行显示行号」，不是「高亮哪几行」。它本身不带背景色、边框或任何视觉强调，只是渲染数字列。想让某几行变色/加底色，得靠额外 CSS 或 JS 注入样式。
怎么用 CSS 选择并高亮第 3 行和第 5–7 行？
必须依赖 pre 包裹 code 的结构，且 Prism 已完成高亮（即 DOM 中已有每行被 span 或 br 分隔的结构）。常见误区是直接对 code 写 :nth-child(3)——没用，因为 code 是单个文本节点，没有子行元素。
正确做法是让 Prism 输出带行包裹的 HTML（需启用插件如 prism-line-numbers 或用 prism-show-language 配合自定义），然后用以下方式之一：
- 如果使用
prism-line-numbers插件：它会在每行外层插入span不对应代码内容，不能用来加背景 - 更可靠的是用
prism-normalize-whitespace+ 手动换行转，再写 CSS：.line[data-line="3"], .line[data-line="5"], .line[data-line="6"], .line[data-line="7"] { background-color: #fffbcc; } - 或者用 JS 动态加 class：
block.querySelectorAll('.token').forEach((t, i) => { if ([2,4,5,6].includes(i)) t.classList.add('highlighted'); });（注意索引从 0 开始）
动态高亮需要监听用户操作？比如点击跳转到某行
是的，纯 HTML/CSS 做不到「根据 URL hash 或按钮点击实时高亮某行」。必须用 JS 绑定事件，并操作 DOM。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
典型流程：
- 确保每行代码在渲染后有唯一标识，例如：
... - 监听 hash 变化：
window.addEventListener('hashchange', highlightLineByHash) - 解析
location.hash，例如#L5或#line-12 - 找到对应
data-line="5"的元素，添加临时 class（如highlight-target），并用 CSS 定义该 class 的背景与过渡效果 - 别忘了滚动到视口：
el.scrollIntoView({ block: 'center', behavior: 'smooth' })
为什么用 table 或双 div 模拟行号后高亮失效？
因为这类方案把「行号」和「代码内容」拆成两个独立 DOM 树。你给代码区域某行加背景色，行号列不会同步响应；反之亦然。更麻烦的是，Prism 高亮逻辑会破坏你手动写的结构，导致 span 嵌套错乱，data-line 属性丢失。
真正能稳定配合高亮的，只有 Prism 原生支持的行级语义结构 —— 即启用插件后由它生成的、带明确行索引标记的 DOM，而不是人工拼接的表格或 flex 布局。否则每次 Prism 更新版本，你的高亮逻辑大概率崩。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
