※静的なファイルでのみ使用できます。ユーザーが入力したテキストのエスケープ目的では使えません。

<body> の末尾に以下を追記すればそうなる。ここでは <pre> 直下の <code> のみを対象に処理する。

<script>
	document.querySelectorAll('pre > code').forEach(function (elem) {
		elem.textContent = elem.innerHTML.trim();
	});
</script>

例えば以下の <body> を持つHTMLは、本当なら <p>&lt;p&gt; と書かなければHTMLとして解釈されてしまうのだが、上記のコードを </body> の前に挿入すれば、HTMLがそのまま表示されるようになる。

<body>
	<pre><code>
<p>ああああああああああああ</p>
<p>いいいいいいいいいいいい</p>
<p>うううううううううううう</p>
	</pre></code>
</body>

用途としては、技術文書的なものをHTMLで配布する際、そのためだけに特殊文字をエスケープするのが面倒な場合。どんだけ限定的なんだ。