5 <title>CodeMirror: HTML5 preview</title>
6 <script src=../lib/codemirror.js></script>
7 <script src=../mode/xml/xml.js></script>
8 <script src=../mode/javascript/javascript.js></script>
9 <script src=../mode/css/css.js></script>
10 <script src=../mode/htmlmixed/htmlmixed.js></script>
11 <link rel=stylesheet href=../lib/codemirror.css>
12 <link rel=stylesheet href=../doc/docs.css>
17 border: 1px solid black;
23 border: 1px solid black;
29 <h1>CodeMirror: HTML5 preview</h1>
30 <textarea id=code name=code>
35 <title>HTML5 canvas demo</title>
36 <style>p {font-family: monospace;}</style>
39 <p>Canvas pane goes here:</p>
40 <canvas id=pane width=300 height=200></canvas>
42 var canvas = document.getElementById('pane');
43 var context = canvas.getContext('2d');
45 context.fillStyle = 'rgb(250,0,0)';
46 context.fillRect(10, 10, 55, 50);
48 context.fillStyle = 'rgba(0, 0, 250, 0.5)';
49 context.fillRect(30, 30, 55, 50);
53 <iframe id=preview></iframe>
56 // Initialize CodeMirror editor with a nice html5 canvas demo.
57 var editor = CodeMirror.fromTextArea(document.getElementById('code'), {
61 editor.on("change", function() {
63 delay = setTimeout(updatePreview, 300);
66 function updatePreview() {
67 var previewFrame = document.getElementById('preview');
68 var preview = previewFrame.contentDocument || previewFrame.contentWindow.document;
70 preview.write(editor.getValue());
73 setTimeout(updatePreview, 300);