Mercurial
comparison .cms/lib/codemirror/demo/changemode.html @ 0:78edf6b517a0 draft
24.10
author | Coffee CMS <info@coffee-cms.ru> |
---|---|
date | Fri, 11 Oct 2024 22:40:23 +0000 |
parents | |
children |
comparison
equal
deleted
inserted
replaced
-1:000000000000 | 0:78edf6b517a0 |
---|---|
1 <!doctype html> | |
2 | |
3 <title>CodeMirror: Mode-Changing Demo</title> | |
4 <meta charset="utf-8"/> | |
5 <link rel=stylesheet href="../doc/docs.css"> | |
6 | |
7 <link rel="stylesheet" href="../lib/codemirror.css"> | |
8 <script src="../lib/codemirror.js"></script> | |
9 <script src="../mode/javascript/javascript.js"></script> | |
10 <script src="../mode/scheme/scheme.js"></script> | |
11 <style> | |
12 .CodeMirror {border: 1px solid black;} | |
13 </style> | |
14 <div id=nav> | |
15 <a href="https://codemirror.net/5"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a> | |
16 | |
17 <ul> | |
18 <li><a href="../index.html">Home</a> | |
19 <li><a href="../doc/manual.html">Manual</a> | |
20 <li><a href="https://github.com/codemirror/codemirror5">Code</a> | |
21 </ul> | |
22 <ul> | |
23 <li><a class=active href="#">Mode-Changing</a> | |
24 </ul> | |
25 </div> | |
26 | |
27 <article> | |
28 <h2>Mode-Changing Demo</h2> | |
29 <form><textarea id="code" name="code"> | |
30 ;; If there is Scheme code in here, the editor will be in Scheme mode. | |
31 ;; If you put in JS instead, it'll switch to JS mode. | |
32 | |
33 (define (double x) | |
34 (* x x)) | |
35 </textarea></form> | |
36 | |
37 <p>On changes to the content of the above editor, a (crude) script | |
38 tries to auto-detect the language used, and switches the editor to | |
39 either JavaScript or Scheme mode based on that.</p> | |
40 | |
41 <script> | |
42 var editor = CodeMirror.fromTextArea(document.getElementById("code"), { | |
43 mode: "scheme", | |
44 lineNumbers: true | |
45 }); | |
46 var pending; | |
47 editor.on("change", function() { | |
48 clearTimeout(pending); | |
49 pending = setTimeout(update, 400); | |
50 }); | |
51 function looksLikeScheme(code) { | |
52 return !/^\s*\(\s*function\b/.test(code) && /^\s*[;\(]/.test(code); | |
53 } | |
54 function update() { | |
55 editor.setOption("mode", looksLikeScheme(editor.getValue()) ? "scheme" : "javascript"); | |
56 } | |
57 </script> | |
58 </article> |