需显式设background-color、color、padding、border-radius，并用@media适配深色模式；动态高亮须遍历文本节点、转义关键词、按长度降序处理多词，否则语义断裂、xss或dom失效。
直接在 <p></p> 里用 <mark></mark> 包裹目标文本就能生效，但仅靠默认样式和简单嵌套无法交付生产环境——它会在高对比度模式、邮件客户端、深色主题下彻底失效，且动态插入时极易引发 XSS 或 DOM 解析错误。
为什么<p><mark>关键词</mark></p>不能只写一次就完事
浏览器默认黄色背景不是稳定输出。Windows 高对比度模式会强制覆盖为黑底白字；Outlook 邮件客户端忽略所有 UA 样式，<mark></mark> 变成透明；CSS 重置规则（如 * { background: transparent }）会清空默认背景。不显式声明样式，等于没高亮。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
background-color和color必须同时设置，否则深色主题下文字可能消失 -
padding和border-radius是刚需，原生<mark></mark>紧贴文字，边缘生硬易误读 - 必须加
@media (prefers-color-scheme: dark)适配深色模式，否则暗色背景下黄底变不可读
动态高亮时，别碰innerHTML.replace()
用 el.innerHTML = el.innerHTML.replace(/keyword/g, '<mark>$</mark>') 是高频翻车点：用户搜 [a-z] 会崩正则；搜 <script>alert(1)</script> 触发 XSS；容器里有 <strong>React</strong> 会被撕开标签，DOM 解析失败。
- 正确路径是遍历纯文本节点：
document.createTreeWalker(el, NodeFilter.SHOW_TEXT) - 对每个
node.textContent做替换，再用document.createElement('mark')插入新节点 - 用户输入的关键词必须双重转义：先 HTML 实体转义（防 XSS），再正则元字符转义（防语法错误）
多个关键词共存时，顺序决定语义是否断裂
同时高亮 JavaScript 和 Script 时，若按数组原始顺序处理，短词先匹配，可能产出 <mark>Java<mark>Script</mark></mark>。浏览器虽自动修正为两个独立 <mark></mark>，但语义已断裂、CSS 样式错位、读屏器播报混乱。
- 关键词数组必须按长度降序排序：
keywords.sort((a, b) => b.length - a.length) - 中文场景还要注意全角/半角一致性，避免“Python”匹配到“蟒蛇thon”
- 英文建议加单词边界
\b，但需确认目标环境是否支持（Safari 旧版不支持）
真正难的不是怎么写 <p><mark></mark></p>，而是怎么让 <mark></mark> 在各种 UA、各种主题、各种输入来源下都保持语义完整、视觉可读、DOM 安全——这三者缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
