行级高亮必须用 <mark> 标签，它是语义正确、屏幕阅读器可识别、默认黄色背景且无需额外CSS的原生方案；需手动注入，注意DOM操作安全、行号对齐、浏览器兼容性及事件监听完整性。
行级高亮必须用 mark，不是 span 或背景色硬写
想在编辑器里标出第 7 行是关键逻辑？别用 style="background: #ffeb3b" 直接写死——mark 是唯一语义正确、屏幕阅读器可识别、默认带黄色背景且无需额外 CSS 的原生方案。它专为“突出显示文本中某段内容”而设计，比手动加 class 更轻量、更健壮。
- 错误：给
<div>加background-color模拟高亮 → 语义丢失，键盘导航无法聚焦，读屏器读作“一个带背景色的 div” - 正确：把整行代码（或其中一段）包裹进
<mark></mark></li> <li>注意：<code>mark
是行内元素，不能包<div>、<p>等块级标签；若需高亮整行（含换行符），得确保父容器是pre或支持white-space: pre的上下文
highlight.js 不负责行级标记，要自己注入 mark
highlight.js 只做语法解析和 token 级着色（比如把 function 标成蓝色、字符串标成红色），它不会、也不能自动给某一行加视觉标记。所谓“第 5 行高亮”，本质是你在渲染后手动找到对应 <code> 内的第 5 个 <span>（或按换行切分后的第 5 行文本节点），再用 document.createElement('mark') 包裹进去。
- 别指望
hljs.highlightElement()返回值里有行号 API —— 它只返回{value: string, top: boolean} - 安全做法：先用
textContent提取原始代码，按\n切成数组，定位目标行索引，再用 DOM 方法插入mark节点，避免 innerHTML 拼接引发 XSS - 如果编辑器内容动态更新（如用户实时输入），每次重绘前必须先清空旧的
mark，否则残留标记会累积
行号对齐时，mark 的 vertical-align 和 line-height 很关键
当代码带行号（比如用 highlightjs-line-numbers.js），mark 高亮区域容易和行号错位：要么偏上、要么被截断。根本原因是 mark 默认继承父级 line-height，而行号栏通常用 display: inline-block + 固定高度对齐。
- 必须显式设置：
mark { line-height: 1.4; vertical-align: text-top; }（数值需匹配代码行的line-height） - 若行号使用绝对定位或 flex 布局，
mark的 background 仍可能被裁剪——此时要在其父<span class="hljs-line">上加overflow: visible - 旧版 Safari 对
mark的 background 渲染不一致，建议加兜底：mark::before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: #ffeb3b; z-index: -1; }
编辑器光标移动时实时更新高亮行，别只监听 click
用户用方向键跳到第 12 行，高亮却还停在第 3 行？说明事件监听不全。真正的“实时”需要覆盖所有能改变光标位置的行为。
立即学习“前端免费学习笔记（深入）”；
- 必须监听：
input（粘贴、删除）、keydown（方向键、Home/End）、keyup（松开时确认最终位置）、mousedown（鼠标点击） - 每次触发都调用类似
getCurrentLineNumber(textarea)的函数（见知识库中那个基于selectionStart的实现），算出当前行号 - 清理旧高亮前，先用
document.querySelectorAll('mark[data-line]')找出带行号标记的节点，避免误删其他用途的mark
mark 插入看似简单，但换行符处理（\r\n vs \n）、DOM 同步时机（是否在 requestAnimationFrame 里执行）、以及编辑器滚动时的视口判断，才是实际落地时最容易卡住的地方。 
