topical media & game development

talk show tell print

mobile-query-three-www-live-playground-vendor-CodeMirror2-demo-preview.htm / htm



  <!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>
  


(C) Æliens 04/09/2009

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.