--- /dev/null
+<!doctype html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CodeMirror: HTML5 preview</title>
+ <script src=../lib/codemirror.js></script>
+ <script src=../mode/xml/xml.js></script>
+ <script src=../mode/javascript/javascript.js></script>
+ <script src=../mode/css/css.js></script>
+ <script src=../mode/htmlmixed/htmlmixed.js></script>
+ <link rel=stylesheet href=../lib/codemirror.css>
+ <link rel=stylesheet href=../doc/docs.css>
+ <style type=text/css>
+ .CodeMirror {
+ float: left;
+ width: 50%;
+ border: 1px solid black;
+ }
+ iframe {
+ width: 49%;
+ float: left;
+ height: 300px;
+ border: 1px solid black;
+ border-left: 0px;
+ }
+ </style>
+ </head>
+ <body>
+ <h1>CodeMirror: HTML5 preview</h1>
+ <textarea id=code name=code>
+<!doctype html>
+<html>
+ <head>
+ <meta charset=utf-8>
+ <title>HTML5 canvas demo</title>
+ <style>p {font-family: monospace;}</style>
+ </head>
+ <body>
+ <p>Canvas pane goes here:</p>
+ <canvas id=pane width=300 height=200></canvas>
+ <script>
+ 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);
+ </script>
+ </body>
+</html></textarea>
+ <iframe id=preview></iframe>
+ <script>
+ var delay;
+ // Initialize CodeMirror editor with a nice html5 canvas demo.
+ var editor = CodeMirror.fromTextArea(document.getElementById('code'), {
+ mode: 'text/html',
+ tabMode: 'indent'
+ });
+ 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);
+ </script>
+ </body>
+</html>