Github の issue 画面の翻訳でコードが壊れないようにする
◆ コードブロックに code タグが使われてない
◆ 翻訳するとコードブロックが壊れる
◆ code タグを追加して壊れないようにする
◆ 翻訳するとコードブロックが壊れる
◆ code タグを追加して壊れないようにする
翻訳するとコードブロックが壊れる
Github の issue ページを見てるときに全部英語で読むのは辛いので Chrome の翻訳機能を多用していますinline code コードがあるとそれがおかしな場所に入ったりはするものの基本は快適に読めます
ただひとつ問題があって コードブロックが壊れます
コードブロック内まで翻訳しようとして 改行など空白文字が消えたり増えたりします
さらに変数名などが日本語になったり 英単語のままで別単語に置き換わったり
読めたものじゃないです
コードブロックはそのまま維持してほしいのに
原因
なぜかこうなるのか調べると Github のコードブロックは code タグが使われてませんでしたpre だけだと中身は翻訳対象として扱われます
Github ともあろうものが意外とマークアップは適当なんですね……
と思ったら pre>code になってるところもありました
もう少し調べるとコードハイライトが有効の場合は div.highlight>pre になってるようです
ときどき問題ないときもあるのはハイライトしないコードブロックということだったみたいです
対処
ハイライトされてる場合に pre の中身を code に移して その code を pre の子要素にすれば問題ないはずですというわけで次のスクリプトを実行すれば自動でその変換をします
const insertCode = () => {
const elems = document.querySelectorAll(".highlight>pre:not([data-precode])")
for(const pre of elems) {
const code = document.createElement("code")
code.append(...pre.childNodes)
pre.append(code)
pre.dataset.precode = "1"
}
}
insertCode()
const observer = new MutationObserver(insertCode).observe(document.body, { childList: true, subtree: true })
MutationObserver を使って変更があったら再検索して code の追加を行うので省略されてる部分を後から表示しても大丈夫です