Code syntax highlighter - Google Code Prettify under textarea tag without html encoding

To highlight code syntax in my blog I use Google Code Prettify. Great tool. But, there is still one thing to do extra - html encoding. Some characters within code blocks need to be converted into escape codes. So, we have to convert all the characters which are < to &lt; and all the > to &gt;. Otherwise the browser will render them as a html tags.

There are many online tools to do that conversion. But, to my mind, it would be more appropriate somehow to eliminate this step. So, to keep code blocks untouched by browser I wrapped my codes into <textarea> tag.

<pre class="prettyprint">
<textarea>
.. you code here
</textarea>
</pre>

Then, I created a tiny jquery script to move code block from <textarea> tag into <pre> tag and then called prettyPrint() to highlight code.

<script>
    $(function() {
        $('pre.prettyprint textarea').each(function(i, obj) {
            var src = $(obj).val();
            $(obj).parent().text(src);
        });
        prettyPrint();
    });
</script>

The last thing... There is one limitation with this solution. If your code block includes the </textarea> tag itself, then the starting < symbol still needs to be converted into &lt;. But, I decided to use this method as is. So far, I never had to highlight the </textarea> in my code blocks except this page.