to-be-integrated/third-party/codemirror-3.15/demo/folding.html

   1 <!doctype html>
   2 <html>
   3   <head>
   4     <meta charset="utf-8">
   5     <title>CodeMirror: Code Folding Demo</title>
   6     <link rel="stylesheet" href="../lib/codemirror.css">
   7     <script src="../lib/codemirror.js"></script>
   8     <script src="../addon/fold/foldcode.js"></script>
   9     <script src="../addon/fold/foldgutter.js"></script>
  10     <script src="../addon/fold/brace-fold.js"></script>
  11     <script src="../addon/fold/xml-fold.js"></script>
  12     <script src="../mode/javascript/javascript.js"></script>
  13     <script src="../mode/xml/xml.js"></script>
  14     <link rel="stylesheet" href="../doc/docs.css">
  15
  16     <style type="text/css">
  17       .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
  18       .CodeMirror-foldmarker {
  19         color: blue;
  20         text-shadow: #b9f 1px 1px 2px, #b9f -1px -1px 2px, #b9f 1px -1px 2px, #b9f -1px 1px 2px;
  21         font-family: arial;
  22         line-height: .3;
  23         cursor: pointer;
  24       }
  25       .CodeMirror-foldgutter {
  26         width: .7em;
  27       }
  28       .CodeMirror-foldgutter-open,
  29       .CodeMirror-foldgutter-folded {
  30         color: #555;
  31         cursor: pointer;
  32       }
  33       .CodeMirror-foldgutter-open:after {
  34         content: "\25BE";
  35       }
  36       .CodeMirror-foldgutter-folded:after {
  37         content: "\25B8";
  38       }
  39     </style>
  40   </head>
  41   <body>
  42     <h1>CodeMirror: Code Folding Demo</h1>
  43
  44     <p>Demonstration of code folding using the code
  45     in <a href="../doc/manual.html#addon_foldcode"><code>foldcode.js</code></a>
  46     and <a href="../doc/manual.html#addon_foldgutter"><code>foldgutter.js</code></a>.
  47     Press ctrl-q or click on the gutter markers to fold a block, again
  48     to unfold.</p>
  49     <form>
  50       <div style="max-width: 50em; margin-bottom: 1em">JavaScript:<br><textarea id="code" name="code"></textarea></div>
  51       <div style="max-width: 50em">HTML:<br><textarea id="code-html" name="code-html"></textarea></div>
  52     </form>
  53     <script id="script">
  54 window.onload = function() {
  55   var te = document.getElementById("code");
  56   var sc = document.getElementById("script");
  57   te.value = (sc.textContent || sc.innerText || sc.innerHTML).replace(/^\s*/, "");
  58   sc.innerHTML = "";
  59   var te_html = document.getElementById("code-html");
  60   te_html.value = "<html>\n  " + document.documentElement.innerHTML + "\n</html>";
  61
  62   window.editor = CodeMirror.fromTextArea(te, {
  63     mode: "javascript",
  64     lineNumbers: true,
  65     lineWrapping: true,
  66     extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }},
  67     foldGutter: true,
  68     gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
  69   });
  70   editor.foldCode(CodeMirror.Pos(8, 0));
  71
  72   window.editor_html = CodeMirror.fromTextArea(te_html, {
  73     mode: "text/html",
  74     lineNumbers: true,
  75     lineWrapping: true,
  76     extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }},
  77     foldGutter: true,
  78     gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
  79   });
  80   editor_html.foldCode(CodeMirror.Pos(13, 0));
  81   editor_html.foldCode(CodeMirror.Pos(1, 0));
  82 };
  83 </script>
  84   </body>
  85 </html>