<!-- Coding Tools
- Theodorakis Ioannis: Mc Engineer
- Code Blog https://superblogger3.blogspot.com
- Newspsper https://yourss365.blogspot.com
- Webdesign https://istogrami365.blogspot.com
- Templates https://webtemplate365.blogspot.com
-->
<center><a href="https://codepen.io/johngreek"><img width="50%" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglP0wkjevU2lAqHYRUSmnXbpxaEYPRzECLqCLuqlVhcnscqOkQfcUPB4zlO7dGNopgZJmvhq2bBYYZtjIghlPhSa_sXBJxHtAQnfiKiyB4joSaDJ1cEDeJgJeqEQQciO30iV-tADAXtQnpN85uG67i52CGr6fsdxq3Kzlw3sTCbF6cwKoaxOO45xJ0ROw/s16000/istogrami900.png"></a></center>
<div id="wrap">
<div id="status">
<p><i class="fa fa-spinner fa-spin fa-fw"></i> generating preview</p>
</div>
<div id="coder">
Paste your code here
</div>
<div id="preview"></div>
</div>*{margin:0;padding:0;box-sizing:border-box;}
#wrap{
height:100%;
position:relative;
padding:0px 10px;
background:#ccc;
}
#coder{
display:block;
position:relative;
width:100%;
height:600px;
border:3px solid red;
}
#preview{
display:block;
position:relative;
width:100%;
height:500px;
border:3px solid blue;
background:#fff;
}
#preview iframe{
width:100%;
height:400px;
border:none;
}
#status{
padding:25px 0;
height:50px;
}var editor = ace.edit("coder");
// editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/html");
editor.getSession().setUseWorker(false);
function myFunction(){
$("#status p").delay(500).fadeOut(200);
var code = editor.getValue();
var iframe = document.createElement('iframe');
var preview = document.getElementById('preview');
var content = '<!doctype html>' + code;
preview.appendChild(iframe);
iframe.contentWindow.document.open('text/htmlreplace');
iframe.contentWindow.document.write(content);
iframe.contentWindow.document.close();
// $("#preview").html(code);
}
myFunction();
var timeout;
$('#search-form .search-terms').on('keydown', function(e){
// get keycode of current keypress event
var code = (e.keyCode || e.which);
// do nothing if it's an arrow key
if(code == 37 || code == 38 || code == 39 || code == 40) {
return;
}
// do normal behaviour for any other key
$('#search-items #autocom').fadeIn();
});
$("#coder").on('keyup', function() {
$("#status p").fadeIn(200);
console.log("yea");
if(timeout) {
clearTimeout(timeout);
timeout = null;
}
$("#preview").empty();
timeout = setTimeout(myFunction, 500)
}); 
External CSS
This Pen doesn't use any external CSS resources.