是 html5 高亮标签，需加 translate="no" 防翻译插件误译；双语内容须用 显式标注语种；动态插入时需立即设置该属性。
用 <mark></mark> 标注重点，但别让翻译插件误读为待译文本
<mark></mark> 是 HTML5 原生语义标签，专用于高亮页面中“需要引起注意”的内容（比如搜索关键词、上下文重点），浏览器默认渲染为黄色背景。但它本身**不携带语言信息**，多数翻译插件（如 Google 翻译、DeepL 浏览器扩展）会把它内部的文本当作普通可译内容处理——导致双语混排时，<mark></mark> 里的中文被翻成英文，或英文被翻成中文，破坏原意。
解决思路不是禁用 <mark></mark>，而是用 translate="no" 显式声明该元素及其子内容**不可翻译**：
<p>这个算法的时间复杂度是 <mark translate="no">O(n log n)</mark>。</p>
- 必须加在
<mark></mark>标签上，加在父级<p></p>上无效（插件通常逐元素判断） - 部分旧版插件可能忽略该属性，但主流 Chrome 扩展（含 Google 官方翻译）均支持
- 不要用
lang="zxx"替代——zxx表示“无语言内容”，但数学符号、代码片段等仍可能被错误触发翻译逻辑
双语并列时，用 <span></span> + lang 隔离语种，避免交叉污染
常见做法是把中文和英文放在同一段落里，比如「排序 <span lang="en">sort</span>」。但如果直接套 <code><mark></mark>，容易漏掉语言标记，导致翻译插件把中文“排序”当成英文词处理（尤其当页面 的 lang 设为 en 时）。
立即学习“前端免费学习笔记（深入）”；
正确写法是分层控制：
<p lang="zh">快速 <mark translate="no"><span lang="zh">排序</span> / <span lang="en">quick sort</span></mark></p>
-
<p lang="zh"></p>告诉插件：整段主语言是中文，未标注的部分按此处理 -
<span lang="en"></span>显式声明英文片段，插件会跳过翻译（因已是目标语言）或保留原文 -
translate="no"加在<mark></mark>上，双重保险——既防误译，也防插件把斜杠“/”当分隔符强行拆译
遇到翻译插件强制覆盖样式？用 !important 锁定 <mark></mark> 背景色
有些翻译插件（如某些国产浏览器内置翻译）会在注入翻译节点时重置所有 <mark></mark> 的样式，把黄色背景变成白色或浅灰，导致重点失效。
最简方案是内联样式加固：
<mark translate="no" style="background-color: #ff0 !important;">关键参数</mark>
- 仅对单个重点生效，不影响全局样式表
- 优先级高于插件注入的 CSS 规则（前提是插件没用
!important覆盖你） - 如果批量使用，建议在 CSS 中写：
mark[translate="no"] { background-color: #ff0 !important; }，但需确保该规则加载早于翻译脚本
真正难处理的是动态插入的 <mark></mark>（比如搜索高亮）
前端 JS 搜索后自动包裹匹配文本生成 <mark></mark>，此时 DOM 已存在，翻译插件可能已完成初始扫描，新加的 <mark></mark> 不会被识别为“不可译”。
必须在插入后立即补上属性：
const markedEl = document.createElement('mark');
markedEl.translate = 'no'; // 等价于 setAttribute('translate', 'no')
markedEl.textContent = matchedText;
parentEl.appendChild(markedEl);
- 不能只靠 CSS 类名或 data 属性——插件不认这些
- 若用 innerHTML 插入，记得字符串里写全
<mark translate="no">...</mark> - React/Vue 等框架中，需确保
translate="no"被真实渲染到 DOM，而非仅存在于虚拟节点
真正麻烦的从来不是怎么标重点，而是怎么让各种翻译工具在不同加载时机、不同解析策略下，都老老实实绕开你的 <mark></mark>。属性要写全，语言要标清，动态内容要手动补，少一个环节就可能白忙活。
