Live Code Preview

HTML

<div id="eg-code-preview" class="text-small">
  <p>Preview the content of the WYSIWYG HTML editor as you type in the box below.</p>
</div><br/>
<pre id="eg-previewer" class="prettyprint">
</pre>

JAVASCRIPT

<script>
  $(function() {
    $('div#eg-code-preview')
      .on('editable.contentChanged editable.initialized', function (e, editor) {
        $('pre#eg-previewer').text(editor.cleanTags(editor.getHTML()))
        $('pre#eg-previewer').removeClass('prettyprinted')
        prettyPrint()
      })
      .editable({
        inlineMode: false
      })
  });
</script>