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">
11 <style type="text/css">
12 .breakpoints {width: .8em;}
13 .breakpoint { color: #822; }
14 .CodeMirror {border: 1px solid #aaa;}
18 <h1>CodeMirror: Breakpoint demo</h1>
20 <form><textarea id="code" name="code">
21 var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
23 gutters: ["CodeMirror-linenumbers", "breakpoints"]
25 editor.on("gutterClick", function(cm, n) {
26 var info = cm.lineInfo(n);
27 cm.setGutterMarker(n, "breakpoints", info.markers ? null : makeMarker());
30 function makeMarker() {
31 var marker = document.createElement("div");
32 marker.innerHTML = "●";
33 marker.className = "breakpoint";
38 <p>Click the line-number gutter to add or remove 'breakpoints'.</p>
41 var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
43 gutters: ["CodeMirror-linenumbers", "breakpoints"]
45 editor.on("gutterClick", function(cm, n) {
46 var info = cm.lineInfo(n);
47 cm.setGutterMarker(n, "breakpoints", info.gutterMarkers ? null : makeMarker());
50 function makeMarker() {
51 var marker = document.createElement("div");
52 marker.style.color = "#822";
53 marker.innerHTML = "●";