Code Folding Demo

JavaScript:
​x
 
1
/*
2
 * Demonstration of code folding
3
 */
4
window.onload = function() {
5
  var te = document.getElementById("code");
6
  var sc = document.getElementById("script");
7
  te.value = (sc.textContent || sc.innerText || sc.innerHTML).replace(/^\s*/, "");
8
  sc.innerHTML = "";
9
  var te_html = document.getElementById("code-html");
10
  te_html.value = document.documentElement.innerHTML;
11
  var te_markdown = document.getElementById("code-markdown");
12
  te_markdown.value = "# Foo\n## Bar\n\nblah blah\n\n## Baz\n\nblah blah\n\n# Quux\n\nblah blah\n"
13
​
14
  window.editor = CodeMirror.fromTextArea(te, {↔});
22
  editor.foldCode(CodeMirror.Pos(13, 0));
23
​
24
  window.editor_html = CodeMirror.fromTextArea(te_html, {
25
    mode: "text/html",
26
    lineNumbers: true,
27
    lineWrapping: true,
28
    extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }},
29
    foldGutter: true,
30
    gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
31
  });
32
  editor_html.foldCode(CodeMirror.Pos(0, 0));
33
  editor_html.foldCode(CodeMirror.Pos(21, 0));
34
​
35
  window.editor_markdown = CodeMirror.fromTextArea(te_markdown, {
36
    mode: "markdown",
37
    lineNumbers: true,
38
    lineWrapping: true,
39
    extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }},
40
    foldGutter: true,
41
    gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
42
  });
43
};
44
HTML:
xxxxxxxxxx
50
 
1
<head>↔</head>
22
​
23
<body>
24
<div id="nav">
25
  <a href="http://codemirror.net"><h1>CodeMirror</h1><img id="logo" src="../doc/logo.png"></a>
26
​
27
  <ul>
28
    <li><a href="../index.html">Home</a>
29
    </li><li><a href="../doc/manual.html">Manual</a>
30
    </li><li><a href="https://github.com/codemirror/codemirror">Code</a>
31
  </li></ul>
32
  <ul>
33
    <li><a class="active" href="#">Code Folding</a>
34
  </li></ul>
35
</div>
36
​
37
<article>
38
  <h2>Code Folding Demo</h2>
39
  <form>
40
    <div style="max-width: 50em; margin-bottom: 1em">JavaScript:<br>
41
    <textarea id="code" name="code"></textarea></div>
42
    <div style="max-width: 50em; margin-bottom: 1em">HTML:<br>
43
    <textarea id="code-html" name="code-html"></textarea></div>
44
    <div style="max-width: 50em">Markdown:<br>
45
    <textarea id="code-markdown" name="code"></textarea></div>
46
  </form>
47
  <script id="script"></script>
48
</article>
49
​
50
</body>
Markdown:
xxxxxxxxxx
13
 
1
# Foo
2
## Bar
3
​
4
blah blah
5
​
6
## Baz
7
​
8
blah blah
9
​
10
# Quux
11
​
12
blah blah
13
​