할 일

Chrome 페이지 번역에 의해 잔인하게 번역되는 React 프로그램 ...


코드가 번역되어 버리는 것은 해당 부분을 HTML의 code 태그로 둘러싸지 않기 때문입니다.

이번은 이 사이트 의 코드가 기재되어 있는 부분을 code 태그로 랩 하는 간단한 JavaScript를 짜서, Chrome 개발자 툴의 consol로부터 실행해 대책해 보려고 생각합니다.

자바스크립트를 공부하는 데 도움이 되세요 🙋‍♂️

구현

1. 상황 파악

F12에서 검증 툴을 열고 내용을 들여다 보면, 역시 code 태그로 둘러싸여 있지 않은 것 같네요.



지금 이런 느낌인 것을,

<pre class="mdxCodeBlock_iHAB">
    <div class="...">
        ...
    </div>
</pre>

이렇게 하면 괜찮을 것 같습니다.

<pre class="mdxCodeBlock_iHAB">
+   <code>
        <div class="...">
            ...
        </div>
+   </code>
</pre>

2. 코딩

댓글이 달린 완성판

// スコープを汚染しないために即時関数で囲んでおく
(() => {
  // 正規表現でclass名が 'mdxCodeBlock_' から始まるエレメントを全て取得
  const codeBlockElements = document.querySelectorAll("[class^=mdxCodeBlock_]");
  // エレメントごとに処理するためのループ
  codeBlockElements.forEach((element) => {
    // 子要素を削除する前に、コピーして残しておく
    // 子要素は1つしかないので、children[0]でOK
    // cloneNodeの引数は、deepcopyを有効にするか否か
    const copiedChildren = element.children[0].cloneNode(true);
    // 子要素を全削除
    while (element.firstChild) {
      element.removeChild(element.firstChild);
    }
    // codeエレメントを作成して、コピーしておいたエレメントをラップして元の場所に戻す
    const wrapElement = document.createElement("code");
    wrapElement.appendChild(copiedChildren);
    element.appendChild(wrapElement);
  });
})();

3. 적용

F12를 눌러 검증 도구를 열고 콘솔 탭으로 이동하여 이번 코드를 두드리십시오.



실행 후 제대로 코드 태그로 둘러싸여 있네요.



번역해도 코드는 안전합니다. (재로드 할 때마다 스크립트를 실행해야합니다)

요약

이런 느낌으로 똑같이 하면 다른 사이트도 대응 가능합니다. 일단 스크립트를 실행하는 것이 귀찮다면 Chrome 확장 프로그램을 직접 만들고 로컬로 적용하면 지속 가능합니다.

꼭 자력으로 해보세요! !

문서 개체 모델(DOM) - Web API | MDN

트위터 : @kzkzkazz