翻訳するとコードブロックが壊れる

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 の追加を行うので省略されてる部分を後から表示しても大丈夫です