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

});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://code.jquery.com/jquery-2.2.4.min.js