行级高亮必须用 标签，它是语义正确、屏幕阅读器可识别、默认黄色背景且无需额外css的原生方案；需手动注入，注意dom操作安全、行号对齐、浏览器兼容性及事件监听完整性。

行级高亮必须用 mark，不是 span 或背景色硬写

想在编辑器里标出第 7 行是关键逻辑？别用 style="background: #ffeb3b" 直接写死——mark 是唯一语义正确、屏幕阅读器可识别、默认带黄色背景且无需额外 CSS 的原生方案。它专为“突出显示文本中某段内容”而设计，比手动加 class 更轻量、更健壮。

• 错误：给 <div> 加 <code>background-color 模拟高亮 → 语义丢失，键盘导航无法聚焦，读屏器读作“一个带背景色的 div”
• 正确：把整行代码（或其中一段）包裹进

  <mark></mark>

• 注意：mark 是行内元素，不能包 <code><div>、<code><p></p> 等块级标签；若需高亮整行（含换行符），得确保父容器是 pre 或支持 white-space: pre 的上下文

  highlight.js 不负责行级标记，要自己注入 mark

  highlight.js 只做语法解析和 token 级着色（比如把 function 标成蓝色、字符串标成红色），它不会、也不能自动给某一行加视觉标记。所谓“第 5 行高亮”，本质是你在渲染后手动找到对应 <code> 内的第 5 个 <span></span>（或按换行切分后的第 5 行文本节点），再用 document.createElement('mark') 包裹进去。

  

  Doc To HTML

  使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

  下载
  • 别指望 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"></span> 上加 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 里执行）、以及编辑器滚动时的视口判断，才是实际落地时最容易卡住的地方。