如何强制谷歌翻译对网页内的<code>标签内容进行翻译

可以强制谷歌翻译识别并翻译<code>标签内容，不需要修改数据库存储的原始内容，以下是适配Angular + ngx-md场景的可落地方案：

方案1：全局覆盖<code>标签的翻译属性（最推荐） #

谷歌翻译默认跳过<code>标签的核心原因是浏览器对该标签的默认translate属性值为no，你只需要在ngx-md渲染完成后统一修改属性即可：

• 给你使用的ngx-md组件添加afterRender事件监听，在回调中批量处理生成的<code>标签：

// 对应ngx-md组件的渲染完成回调
onMarkdownRendered() {
  document.querySelectorAll('ngx-md code').forEach(codeEl => {
    // 覆盖默认的不翻译属性
    codeEl.setAttribute('translate', 'yes');
    // 移除可能存在的谷歌翻译忽略类
    codeEl.classList.remove('notranslate');
  })
}

• 如果你需要全局生效，也可以直接在Angular的全局样式中添加规则，无需额外JS逻辑：

/* 全局样式文件styles.css */
ngx-md code {
  translate: yes;
}

该方案不会修改你数据库存储的原始markdown内容，仅在前端渲染阶段修改渲染后的DOM属性，完全适配现有业务逻辑。

方案2：临时替换标签处理（仅用于特殊场景） #

如果遇到部分地区谷歌翻译版本仍然跳过translate="yes"的<code>标签，你可以在用户触发翻译前临时把<code>标签替换为带自定义样式的<span>标签，翻译完成后再还原：

• 给翻译触发按钮添加前置钩子，替换所有<code>为带code-style类的<span>
• 翻译完成的回调中再把对应<span>还原为<code>标签即可

注意：如果你的<code>标签内包含真正不需要翻译的代码片段（而非业务文本），可以给对应片段手动添加notranslate类做例外处理，避免被误翻译。

内容的提问来源于stack exchange，提问作者RLU