Live Code Preview

Try it yourself:

Edit in JSFiddle

HTML

<div id="froala-editor">
  <p>Preview the HTML code of the WYSIWYG HTML editor as you type in the box below.</p>
</div>
<br/>
<pre id="eg-previewer" class="prettyprint linenums:1">
</pre>

JAVASCRIPT

<script>
  $(function() {
    $('div#froala-editor')
      .on('froalaEditor.contentChanged froalaEditor.initialized', function (e, editor) {
        $('pre#eg-previewer').text(editor.codeBeautifier.run(editor.html.get()))
        $('pre#eg-previewer').removeClass('prettyprinted');
        prettyPrint()
      })
      .froalaEditor()
  });
</script>