third-party/codemirror-3.15/demo/marker.html

   1 <!doctype html>
   2 <html>
   3   <head>
   4     <meta charset="utf-8">
   5     <title>CodeMirror: Breakpoint Demo</title>
   6     <link rel="stylesheet" href="../lib/codemirror.css">
   7     <script src="../lib/codemirror.js"></script>
   8     <script src="../mode/javascript/javascript.js"></script>
   9     <link rel="stylesheet" href="../doc/docs.css">
  10
  11     <style type="text/css">
  12       .breakpoints {width: .8em;}
  13       .breakpoint { color: #822; }
  14       .CodeMirror {border: 1px solid #aaa;}
  15     </style>
  16   </head>
  17   <body>
  18     <h1>CodeMirror: Breakpoint demo</h1>
  19
  20     <form><textarea id="code" name="code">
  21 var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
  22   lineNumbers: true,
  23   gutters: ["CodeMirror-linenumbers", "breakpoints"]
  24 });
  25 editor.on("gutterClick", function(cm, n) {
  26   var info = cm.lineInfo(n);
  27   cm.setGutterMarker(n, "breakpoints", info.markers ? null : makeMarker());
  28 });
  29
  30 function makeMarker() {
  31   var marker = document.createElement("div");
  32   marker.innerHTML = "●";
  33   marker.className = "breakpoint";
  34   return marker;
  35 }
  36 </textarea></form>
  37
  38 <p>Click the line-number gutter to add or remove 'breakpoints'.</p>
  39
  40     <script>
  41 var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
  42   lineNumbers: true,
  43   gutters: ["CodeMirror-linenumbers", "breakpoints"]
  44 });
  45 editor.on("gutterClick", function(cm, n) {
  46   var info = cm.lineInfo(n);
  47   cm.setGutterMarker(n, "breakpoints", info.gutterMarkers ? null : makeMarker());
  48 });
  49
  50 function makeMarker() {
  51   var marker = document.createElement("div");
  52   marker.style.color = "#822";
  53   marker.innerHTML = "●";
  54   return marker;
  55 }
  56     </script>
  57
  58   </body>
  59 </html>