<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>