.CodeMirror { float: left; width: 50%; border: 1px solid black; } iframe { width: 49%; float: left; height: 300px; border: 1px solid black; border-left: 0px; }
CodeMirror
Home Manual Code
HTML5 preview
HTML5 preview
HTML5 canvas demo p {font-family: monospace;}
Canvas pane goes here
var canvas = document.getElementById('pane'); var context = canvas.getContext('2d');
context.fillStyle = 'rgb(250,0,0)'; context.fillRect(10, 10, 55, 50);
context.fillStyle = 'rgba(0, 0, 250, 0.5)'; context.fillRect(30, 30, 55, 50);
var delay; // Initialize CodeMirror editor with a nice html5 canvas demo. var editor = CodeMirror.fromTextArea(document.getElementById('code'), { mode: 'text/html' }); editor.on("change", function() { clearTimeout(delay); delay = setTimeout(updatePreview, 300); });
function updatePreview() { var previewFrame = document.getElementById('preview'); var preview = previewFrame.contentDocument || previewFrame.contentWindow.document; preview.open(); preview.write(editor.getValue()); preview.close(); } setTimeout(updatePreview, 300);