CodeMirror: Code Folding Demo

Demonstration of code folding using the code in foldcode.js and foldgutter.js. Press ctrl-q or click on the gutter markers 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
  window.editor = CodeMirror.fromTextArea(te, {↔});
17
  editor.foldCode(CodeMirror.Pos(8, 0));
18
 
19
  window.editor_html = CodeMirror.fromTextArea(te_html, {
20
    mode: "text/html",
21
    lineNumbers: true,
22
    lineWrapping: true,
23
    extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }},
24
    foldGutter: true,
25
    gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
26
  });
27
  editor_html.foldCode(CodeMirror.Pos(13, 0));
28
  editor_html.foldCode(CodeMirror.Pos(1, 0));
29
};
30
 
 
HTML:
<html>
1
<html>
2
  <head>↔</head>
40
  <body>
41
    <h1>CodeMirror: Code Folding Demo</h1>
42
 
43
    <p>Demonstration of code folding using the code
44
    in <a href="../doc/manual.html#addon_foldcode"><code>foldcode.js</code></a>
45
    and <a href="../doc/manual.html#addon_foldgutter"><code>foldgutter.js</code></a>.
46
    Press ctrl-q or click on the gutter markers to fold a block, again
47
    to unfold.</p>
48
    <form>
49
      <div style="max-width: 50em; margin-bottom: 1em">JavaScript:<br><textarea id="code" name="code"></textarea></div>
50
      <div style="max-width: 50em">HTML:<br><textarea id="code-html" name="code-html"></textarea></div>
51
    </form>
52
    <script id="script"></script>
53
54
 
55
</body>
56
</html>