<style>
textarea.code {
	display: block;
	color: maroon;
	font-weight: bold;
	resize: none;
	overflow: hidden;
	outline: none;
	border: none;
}
</style>

<textarea class="code">
<script>
(function () {
	var ta = document.querySelectorAll('textarea.code');
	var len = ta.length;
	var par, el, pre;
	for  (var i = 0; i < len; i++) {
		el = ta[i];
		el.wrap = "off";
		el.readonly = "readonly" ;
		el.style.height = ta[i].scrollHeight + 'px';
		el.style.width = ta[i].scrollWidth + 'px';
		par = el.parentNode;
		pre = document.createElement('pre');
		pre.appendChild(document.createTextNode(el.value));
		par.replaceChild(pre, el);
	}
})();
</script>
</textarea>

<script>
window.onload = function () {
	var ta = document.querySelectorAll('textarea.code');
	var len = ta.length;
	var par, el, pre;
	for  (var i = 0; i < len; i++) {
		el = ta[i];
		el.wrap = "off";
		el.readonly = "readonly" ;
		el.style.height = ta[i].scrollHeight + 'px';
		el.style.width = ta[i].scrollWidth + 'px';
		par = el.parentNode;
		pre = document.createElement('pre');
		pre.appendChild(document.createTextNode(el.value));
		setTimeout(function() {par.replaceChild(pre, el);}, 3000);
	}
}
</script>

<textarea rows="6" cols="30">
<script>
	alert();
		alert();
</script>
</textarea>
<textarea class="code" rows="6" cols="30">
<script>
	alert();
		alert();
</script>
</textarea>

<script>
window.onload = function () {
	var ta = document.getElementsByClassName('code')[0];
	ta.value = ta.value.replace(/\t/g, '    ');
}
</script>