多音字高亮必须用 mark 包裹整个 ruby 结构，不可嵌套；需为 mark 显式定义 background-color、color、padding，并适配暗色模式；拼音与汉字须一一对应、分字标注；多关键词高亮须按长度降序处理以避免嵌套。
多音字高亮必须用 mark 套在 ruby 外层，不能嵌套或反包
直接把 mark 写进 ruby 里（比如 <ruby><mark>行</mark><rt>xíng</rt></ruby>）会导致语义混乱：屏幕阅读器可能跳过拼音、Safari 会错位渲染、CSS 选择器无法精准控制高亮区域。正确做法是让 mark 包裹整个 ruby 结构，保证“汉字+拼音”作为一个逻辑单元被标记。
-
ruby负责语义化注音，mark负责上下文相关性强调，二者职责不可互换 - 若一段文本含多个多音字，每个都需独立
<mark><ruby>...</ruby></mark>，避免共用一个mark导致点击/键盘聚焦范围过大 - 不要用
span+ class 模拟，它不传递“这是当前上下文重点”的语义，对读屏软件和搜索引擎无效
mark 必须显式声明 background-color 和 color，否则暗色模式下完全不可见
浏览器默认的黄色背景（#ff0）在系统启用暗色模式、Windows 高对比度模式或 Outlook 邮件中会被清空或重置为透明。如果你只写 <mark><ruby>长<rt>zhǎng</rt></ruby></mark> 而不加 CSS，用户在深色主题下看到的可能是黑底黑字甚至纯空白。
- 至少要写：
mark { background-color: #fff9c4; color: #1f2329; }（浅黄底深灰字，WCAG AA 对比度达标） - 搭配
@media (prefers-color-scheme: dark)主动适配：mark { background-color: #374151; color: #f9fafb; } - 别漏
padding：mark { padding: 1px 4px; border-radius: 3px; }，原生mark紧贴文字，边缘割裂易误读
动态生成多音字高亮时，拼音与汉字必须严格一一对应，且按实际读音标注
HTML 不做语音判断，你得自己决定“长”标 zhǎng 还是 cháng。但一旦选定，ruby 内部结构必须匹配：一个汉字对应一个 rt，不能多字共用一个拼音，也不能跳过某字不标。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 错误示例：
<ruby>长大<rt>zhǎng dà</rt></ruby>—— “大”字本音是dà，但此处轻声，应标dà或按规范写作da；更稳妥是分字：<ruby>长<rt>zhǎng</rt>大<rt>dà</rt></ruby> - JavaScript 动态插入时，必须确保拼音数组与汉字数组长度一致，且按 DOM 顺序逐字绑定，不能靠字符串 replace，否则
<code>console.log()类内容会被撕开 - 搜索高亮多音字关键词（如用户搜“行”），需先识别该处读音再渲染，不能统一标
xíng或háng
多关键词同时高亮时，必须按长度降序处理，否则拼音结构被破坏
如果页面同时要高亮“银行”和“行”，而你先匹配短词“行”，就会出现 <mark><ruby><mark>行</mark><rt>xíng</rt></ruby></mark>银<ruby>行<rt>háng</rt></ruby>” 的非法嵌套，导致外层 <code>mark 样式错位、内层拼音显示异常。
立即学习“前端免费学习笔记（深入）”；
- 提取所有待高亮词后，先排序：
keywords.sort((a, b) => b.length - a.length) - 遍历文本节点时，只匹配完整词，不匹配子串；用
RegExp.escape转义正则元字符，防止.、*等触发报错 - 每个匹配结果创建独立
mark元素，再用node.parentNode.replaceChild(mark, node)替换，不碰innerHTML
真实项目里最容易被忽略的是：多音字高亮不是“标完拼音再套个黄框”就结束，而是从语音规范、DOM 结构、CSS 可访问性到 JS 渲染顺序，每一步都卡着语义完整性。漏掉任意一环，轻则样式错乱，重则对残障用户完全不可用。
