folding.html (4229B)
1 <!doctype html> 2 3 <head> 4 <title>CodeMirror: Code Folding Demo</title> 5 <meta charset="utf-8"/> 6 <link rel=stylesheet href="../doc/docs.css"> 7 8 <style> 9 .some-css { 10 color: red; 11 line-height: 2; 12 } 13 </style> 14 15 <link rel="stylesheet" href="../lib/codemirror.css"> 16 <link rel="stylesheet" href="../addon/fold/foldgutter.css" /> 17 <script src="../lib/codemirror.js"></script> 18 <script src="../addon/fold/foldcode.js"></script> 19 <script src="../addon/fold/foldgutter.js"></script> 20 <script src="../addon/fold/brace-fold.js"></script> 21 <script src="../addon/fold/xml-fold.js"></script> 22 <script src="../addon/fold/indent-fold.js"></script> 23 <script src="../addon/fold/markdown-fold.js"></script> 24 <script src="../addon/fold/comment-fold.js"></script> 25 <script src="../mode/javascript/javascript.js"></script> 26 <script src="../mode/xml/xml.js"></script> 27 <script src="../mode/css/css.js"></script> 28 <script src="../mode/htmlmixed/htmlmixed.js"></script> 29 <script src="../mode/python/python.js"></script> 30 <script src="../mode/markdown/markdown.js"></script> 31 <style type="text/css"> 32 .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;} 33 </style> 34 </head> 35 36 <body> 37 <div id=nav> 38 <a href="http://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a> 39 40 <ul> 41 <li><a href="../index.html">Home</a> 42 <li><a href="../doc/manual.html">Manual</a> 43 <li><a href="https://github.com/codemirror/codemirror">Code</a> 44 </ul> 45 <ul> 46 <li><a class=active href="#">Code Folding</a> 47 </ul> 48 </div> 49 50 <article> 51 <h2>Code Folding Demo</h2> 52 <form> 53 <div style="max-width: 50em; margin-bottom: 1em">JavaScript:<br> 54 <textarea id="code" name="code"></textarea></div> 55 <div style="max-width: 50em; margin-bottom: 1em">HTML:<br> 56 <textarea id="code-html" name="code-html"></textarea></div> 57 <div style="max-width: 50em">Python:<br> 58 <textarea id="code-python" name="code"> 59 def foo(): 60 do_some_stuff() 61 here 62 return None 63 64 class Bar: 65 __init__(self): 66 if True: 67 print("True") 68 else: 69 print("False") 70 71 this_code_makes_no_sense(): 72 pass 73 74 # A comment</textarea></div> 75 <div style="max-width: 50em">Markdown:<br> 76 <textarea id="code-markdown" name="code"></textarea></div> 77 </form> 78 <script id="script"> 79 /* 80 * Demonstration of code folding 81 */ 82 window.onload = function() { 83 var te = document.getElementById("code"); 84 var sc = document.getElementById("script"); 85 te.value = (sc.textContent || sc.innerText || sc.innerHTML).replace(/^\s*/, ""); 86 sc.innerHTML = ""; 87 var te_html = document.getElementById("code-html"); 88 te_html.value = document.documentElement.innerHTML; 89 var te_python = document.getElementById("code-python"); 90 var te_markdown = document.getElementById("code-markdown"); 91 te_markdown.value = "# Foo\n## Bar\n\nblah blah\n\n## Baz\n\nblah blah\n\n# Quux\n\nblah blah\n" 92 93 window.editor = CodeMirror.fromTextArea(te, { 94 mode: "javascript", 95 lineNumbers: true, 96 lineWrapping: true, 97 extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }}, 98 foldGutter: true, 99 gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"] 100 }); 101 editor.foldCode(CodeMirror.Pos(13, 0)); 102 103 window.editor_html = CodeMirror.fromTextArea(te_html, { 104 mode: "text/html", 105 lineNumbers: true, 106 lineWrapping: true, 107 extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }}, 108 foldGutter: true, 109 gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"] 110 }); 111 editor_html.foldCode(CodeMirror.Pos(0, 0)); 112 editor_html.foldCode(CodeMirror.Pos(34, 0)); 113 114 window.editor_python = CodeMirror.fromTextArea(te_python, { 115 mode: "python", 116 lineNumbers: true, 117 extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }}, 118 foldGutter: true, 119 gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"] 120 }); 121 122 window.editor_markdown = CodeMirror.fromTextArea(te_markdown, { 123 mode: "markdown", 124 lineNumbers: true, 125 lineWrapping: true, 126 extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }}, 127 foldGutter: true, 128 gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"] 129 }); 130 }; 131 </script> 132 </article> 133 </body>