CodeMirror: Code Folding Demo

Demonstration of code folding using the code in foldcode.js. Press ctrl-q or click on the gutter to fold a block, again to unfold.

JavaScript:
window.onload = function() {
1
window.onload = function() {
2
  var te = document.getElementById("code");
3
  var sc = document.getElementById("script");
4
  te.value = (sc.textContent || sc.innerText || sc.innerHTML).replace(/^\s*/, "");
5
  sc.innerHTML = "";
6
  var te_html = document.getElementById("code-html");
7
  te_html.value = "<html>\n  " + document.documentElement.innerHTML + "\n</html>";
8
 
9
  function foldJS(cm, where) { cm.foldCode(where, CodeMirror.braceRangeFinder); }
10
  window.editor = CodeMirror.fromTextArea(te, {↔});
16
  editor.on("gutterClick", foldJS);
17
  foldJS(editor, 9);
18
 
19
  function foldHTML(cm, where) { cm.foldCode(where, CodeMirror.tagRangeFinder); }
20
  window.editor_html = CodeMirror.fromTextArea(te_html, {
21
    mode: "text/html",
22
    lineNumbers: true,
23
    lineWrapping: true,
24
    extraKeys: {"Ctrl-Q": function(cm){foldHTML(cm, cm.getCursor());}}
25
  });
26
  editor_html.on("gutterClick", foldHTML);
27
  foldHTML(editor_html, 13);
28
  foldHTML(editor_html, 1);
29
};
30
 
 
HTML:
<html>
1
<html>
2
  <head>↔</head>
25
  <body>
26
    <h1>CodeMirror: Code Folding Demo</h1>
27
 
28
    <p>Demonstration of code folding using the code
29
    in <a href="../addon/fold/foldcode.js"><code>foldcode.js</code></a>.
30
    Press ctrl-q or click on the gutter to fold a block, again
31
    to unfold.</p>
32
    <form>
33
      <div style="max-width: 50em; margin-bottom: 1em">JavaScript:<br><textarea id="code" name="code"></textarea></div>
34
      <div style="max-width: 50em">HTML:<br><textarea id="code-html" name="code-html"></textarea></div>
35
    </form>
36
    <script id="script"></script>
37
38
 
39
</body>
40
</html>