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 | <!doctype html> <html> <head> <title>CodeMirror: Code Folding Demo</title> <link rel="stylesheet" href="../lib/codemirror.css"> <script src="../lib/codemirror.js"></script> <script src="../lib/util/foldcode.js"></script> <script src="../mode/javascript/javascript.js"></script> <link rel="stylesheet" href="../doc/docs.css"> <style type="text/css"> .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;} .CodeMirror-gutter {min-width: 2.6em; cursor: pointer;} </style> </head> <body> <h1>CodeMirror: Code Folding Demo</h1> <form><div style="max-width: 50em"><textarea id="code" name="code"></textarea></div></form> <script id="script"> window.onload = function() { var te = document.getElementById("code"); var sc = document.getElementById("script"); te.value = (sc.textContent || sc.innerText || sc.innerHTML).replace(/^\s*/, ""); var foldFunc = CodeMirror.newFoldFunction(CodeMirror.braceRangeFinder); function keyEvent(cm, e) { if (e.keyCode == 81 && e.ctrlKey) { if (e.type == "keydown") { e.stop(); setTimeout(function() {foldFunc(cm, cm.getCursor().line);}, 50); } return true; } } window.editor = CodeMirror.fromTextArea(te, { mode: "javascript", lineNumbers: true, lineWrapping: true, onGutterClick: foldFunc, extraKeys: {"Ctrl-Q": function(cm){foldFunc(cm, cm.getCursor().line);}} }); foldFunc(editor, 6); foldFunc(editor, 16); }; </script> <p>Demonstration of code folding using the code in <a href="../lib/util/foldcode.js"><code>foldcode.js</code></a>. Press ctrl-q or click on the gutter to fold a block, again to unfold.</p> </body> </html> |