开发人员可能会看一些英文的文档,在 Chrome 上通过右键【翻译中文】非常方便。
开发人员看的网站通常会存在代码段,谷歌也会翻译这部分内容,这就导致代码格式乱了,而且翻译中文后反而看不懂了。如何避免代码被翻译呢?
搜到了一篇文章 How can I tell Google Translate to not translate a section of a website?
按照介绍,只需要给元素添加 class="notranslate"
,Chrome 翻译就会忽略添加这个样式的块。
以 ES 文档为例,如下图所示:
直接翻译后效果如下:
想要避免翻译就的加样式。先看看代码段的 html 代码:
可以看到这里使用的 pre 标签,大多数开发相关文档中的代码段都是 <pre>
标签,比如最容易出现代码段的 github:
github 也是 <pre>
,其他基本上都是。
想要避免被翻译最简单的就是给所有 <pre>
标签添加上 class="notranslate"
样式。
加样式最方便的插件就是 Tampermonkey:
安装这个插件然后新建一个脚本,内容如下:
// ==UserScript==
// @name notranslate
// @namespace https://gist.github.com/abel533/5839d3eca4686646baba113fc47e9b22
// @version 1.0
// @description 浏览器翻译时排除代码片段
// @author isea533
// @match *://**/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
window.addEventListener('load', function() {
noTranslate(document.getElementsByTagName('pre'));
noTranslate(document.getElementsByClassName('gist'));
noTranslate(document.getElementsByClassName('CodeMirror-code'));
}, false);
function noTranslate(items) {
if(items && items.length > 0) {
for(var i = 0; i < items.length; i++) {
items[i].classList.add('notranslate');
}
}
}
})();
代码非常简单,找到所有 pre
然后添加 class
即可。
2021-7-16 更新
- 增加 gist 和 CodeMirror 支持,并且在页面渲染完成后执行。
- 代码地址:https://gist.github.com/abel533/5839d3eca4686646baba113fc47e9b22
脚本上面的 // @name elastic-notranslate
是脚本的名字。// @match *://**/*
是匹配所有网站。保存脚本后刷新刚才的文档页面,查看 html 如下:
可以看到此时已经有了 notranslate
,现在右键翻译就会排除这部分,效果如下:
此时的文档看起来就舒服多了。