3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Chromeの翻訳機能を使う時にソースコードを翻訳しないまま残す

Posted at

下記ブックマークレットを使うと、ソースコードを翻訳しないまま残せます。

javascript: document.querySelectorAll("pre").forEach(e => e.classList.add("notranslate"));

ブラウザで適当なタブを開いて、コンソールで下記実行すると検証用ページを作れます。

document.querySelector("html").innerHTML = `
<html lang="en">
  <body>
    <p>This is awesome code.</p>
    <pre>
      const object = {
        "script": "run test"
      }
    </pre>
  </body>
</html>
`;

image.png

このページをChromeブラウザの翻訳機能で翻訳すると、ソースコードの部分まで和訳されてしまいます。コメントやメッセージ用の文字列ならば翻訳されて有用な場合もありますが、constというキーワードやscriptというオブジェクトのキーまで翻訳されてしまうと、文法が壊れてしまったり設定が当たらなくなりコードも読めなくなるので、翻訳されてほしくない時があるとおもいま

image.png

Google翻訳の機能で、notranslateというクラスを付与すると翻訳をしなくなります。

なんと2008年に登場した歴史ある機能のようです。

冒頭のブックマークレットを実行して<pre>タグにnotranslateクラスを付与することで、ソースコード部分のみを翻訳しないようにできます。

image.png

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?