folding.html 3.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. <!doctype html>
  2. <head>
  3. <title>CodeMirror: Code Folding Demo</title>
  4. <meta charset="utf-8"/>
  5. <link rel=stylesheet href="../doc/docs.css">
  6. <link rel="stylesheet" href="../lib/codemirror.css">
  7. <link rel="stylesheet" href="../addon/fold/foldgutter.css" />
  8. <script src="../lib/codemirror.js"></script>
  9. <script src="../addon/fold/foldcode.js"></script>
  10. <script src="../addon/fold/foldgutter.js"></script>
  11. <script src="../addon/fold/brace-fold.js"></script>
  12. <script src="../addon/fold/xml-fold.js"></script>
  13. <script src="../addon/fold/markdown-fold.js"></script>
  14. <script src="../addon/fold/comment-fold.js"></script>
  15. <script src="../mode/javascript/javascript.js"></script>
  16. <script src="../mode/xml/xml.js"></script>
  17. <script src="../mode/markdown/markdown.js"></script>
  18. <style type="text/css">
  19. .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
  20. </style>
  21. </head>
  22. <body>
  23. <div id=nav>
  24. <a href="http://codemirror.net"><img id=logo src="../doc/logo.png"></a>
  25. <ul>
  26. <li><a href="../index.html">Home</a>
  27. <li><a href="../doc/manual.html">Manual</a>
  28. <li><a href="https://github.com/marijnh/codemirror">Code</a>
  29. </ul>
  30. <ul>
  31. <li><a class=active href="#">Code Folding</a>
  32. </ul>
  33. </div>
  34. <article>
  35. <h2>Code Folding Demo</h2>
  36. <form>
  37. <div style="max-width: 50em; margin-bottom: 1em">JavaScript:<br>
  38. <textarea id="code" name="code"></textarea></div>
  39. <div style="max-width: 50em; margin-bottom: 1em">HTML:<br>
  40. <textarea id="code-html" name="code-html"></textarea></div>
  41. <div style="max-width: 50em">Markdown:<br>
  42. <textarea id="code-markdown" name="code"></textarea></div>
  43. </form>
  44. <script id="script">
  45. /*
  46. * Demonstration of code folding
  47. */
  48. window.onload = function() {
  49. var te = document.getElementById("code");
  50. var sc = document.getElementById("script");
  51. te.value = (sc.textContent || sc.innerText || sc.innerHTML).replace(/^\s*/, "");
  52. sc.innerHTML = "";
  53. var te_html = document.getElementById("code-html");
  54. te_html.value = document.documentElement.innerHTML;
  55. var te_markdown = document.getElementById("code-markdown");
  56. te_markdown.value = "# Foo\n## Bar\n\nblah blah\n\n## Baz\n\nblah blah\n\n# Quux\n\nblah blah\n"
  57. window.editor = CodeMirror.fromTextArea(te, {
  58. mode: "javascript",
  59. lineNumbers: true,
  60. lineWrapping: true,
  61. extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }},
  62. foldGutter: true,
  63. gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
  64. });
  65. editor.foldCode(CodeMirror.Pos(13, 0));
  66. window.editor_html = CodeMirror.fromTextArea(te_html, {
  67. mode: "text/html",
  68. lineNumbers: true,
  69. lineWrapping: true,
  70. extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }},
  71. foldGutter: true,
  72. gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
  73. });
  74. editor_html.foldCode(CodeMirror.Pos(0, 0));
  75. editor_html.foldCode(CodeMirror.Pos(21, 0));
  76. window.editor_markdown = CodeMirror.fromTextArea(te_markdown, {
  77. mode: "markdown",
  78. lineNumbers: true,
  79. lineWrapping: true,
  80. extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }},
  81. foldGutter: true,
  82. gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
  83. });
  84. };
  85. </script>
  86. </article>
  87. </body>