1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | <!doctype html> <html> <head> <title>CodeMirror: HTML5 preview</title> <meta charset=utf-8> <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', onChange: 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> |