HTMLのタグを文字列として表示する

Google Chrome ver43で試しました。

<code>
<div>hoge</div>
</code>

上記だと
<></> がタグとして認識されてしまう。
<> を表示するため特殊文字を使用する必要がある

< は < > は >

<code>
&lt;div&gt;hoge&lt;/div&gt;
</code>

とすれば表示できるが非常に面倒くさい
動的に変換するプログラムを作ってみた。

#ソースコード

sample.js

//jquery
var code = $('code');
code.html(code.html().replace(/</g,'&lt;').replace(/>/,'&gt;'));

//JavaScript
var code = document.querySelector('code');
code.innerHTML = code.innerHTML.replace(/</g,'&lt;').replace(/>/,'&gt;');

<code>
<div>hoge</div>
</code>
<script>
var code = document.querySelector('code');
code.innerHTML = code.innerHTML.replace(/</g,'&lt;').replace(/>/,'&gt;');
</script>

上記のように直感的?に記述することができます。