5 <title>CodeMirror: Code Folding Demo</title>
6 <link rel="stylesheet" href="../lib/codemirror.css">
7 <script src="../lib/codemirror.js"></script>
8 <script src="../addon/fold/foldcode.js"></script>
9 <script src="../addon/fold/foldgutter.js"></script>
10 <script src="../addon/fold/brace-fold.js"></script>
11 <script src="../addon/fold/xml-fold.js"></script>
12 <script src="../mode/javascript/javascript.js"></script>
13 <script src="../mode/xml/xml.js"></script>
14 <link rel="stylesheet" href="../doc/docs.css">
16 <style type="text/css">
17 .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
18 .CodeMirror-foldmarker {
20 text-shadow: #b9f 1px 1px 2px, #b9f -1px -1px 2px, #b9f 1px -1px 2px, #b9f -1px 1px 2px;
25 .CodeMirror-foldgutter {
28 .CodeMirror-foldgutter-open,
29 .CodeMirror-foldgutter-folded {
33 .CodeMirror-foldgutter-open:after {
36 .CodeMirror-foldgutter-folded:after {
42 <h1>CodeMirror: Code Folding Demo</h1>
44 <p>Demonstration of code folding using the code
45 in <a href="../doc/manual.html#addon_foldcode"><code>foldcode.js</code></a>
46 and <a href="../doc/manual.html#addon_foldgutter"><code>foldgutter.js</code></a>.
47 Press ctrl-q or click on the gutter markers to fold a block, again
50 <div style="max-width: 50em; margin-bottom: 1em">JavaScript:<br><textarea id="code" name="code"></textarea></div>
51 <div style="max-width: 50em">HTML:<br><textarea id="code-html" name="code-html"></textarea></div>
54 window.onload = function() {
55 var te = document.getElementById("code");
56 var sc = document.getElementById("script");
57 te.value = (sc.textContent || sc.innerText || sc.innerHTML).replace(/^\s*/, "");
59 var te_html = document.getElementById("code-html");
60 te_html.value = "<html>\n " + document.documentElement.innerHTML + "\n</html>";
62 window.editor = CodeMirror.fromTextArea(te, {
66 extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }},
68 gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
70 editor.foldCode(CodeMirror.Pos(8, 0));
72 window.editor_html = CodeMirror.fromTextArea(te_html, {
76 extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }},
78 gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
80 editor_html.foldCode(CodeMirror.Pos(13, 0));
81 editor_html.foldCode(CodeMirror.Pos(1, 0));