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>