openrat-cms

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README

marker.html (1485B)


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