| <!doctype html> | |
| <html> | |
| <head> | |
| <title>CodeMirror: Mode-Changing Demo</title> | |
| <link rel="stylesheet" href="../lib/codemirror.css"> | |
| <script src="../lib/codemirror.js"></script> | |
| <script src="../mode/javascript/javascript.js"></script> | |
| <script src="../mode/scheme/scheme.js"></script> | |
| <link rel="stylesheet" href="../doc/docs.css"> | |
| <style type="text/css"> | |
| .CodeMirror {border: 1px solid black;} | |
| </style> | |
| </head> | |
| <body> | |
| <h1>CodeMirror: Mode-Changing demo</h1> | |
| <form><textarea id="code" name="code"> | |
| ;; If there is Scheme code in here, the editor will be in Scheme mode. | |
| ;; If you put in JS instead, it'll switch to JS mode. | |
| (define (double x) | |
| (* x x)) | |
| </textarea></form> | |
| <p>On changes to the content of the above editor, a (crude) script | |
| tries to auto-detect the language used, and switches the editor to | |
| either JavaScript or Scheme mode based on that.</p> | |
| <script> | |
| var editor = CodeMirror.fromTextArea(document.getElementById("code"), { | |
| mode: "scheme", | |
| lineNumbers: true, | |
| matchBrackets: true, | |
| tabMode: "indent", | |
| onChange: function() { | |
| clearTimeout(pending); | |
| setTimeout(update, 400); | |
| } | |
| }); | |
| var pending; | |
| function looksLikeScheme(code) { | |
| return !/^\s*\(\s*function\b/.test(code) && /^\s*[;\(]/.test(code); | |
| } | |
| function update() { | |
| editor.setOption("mode", looksLikeScheme(editor.getValue()) ? "scheme" : "javascript"); | |
| } | |
| </script> | |
| </body> | |
| </html> | |