codemirror5/demo/marker.html at master · codemirror/codemirror5 · GitHub

Name: codemirror5/demo/marker.html at master · codemirror/codemirror5 · GitHub
Rating: 4.9 (5037 reviews)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!doctype html>

<title>CodeMirror: Breakpoint Demo</title>
<metacharset="utf-8"/>
<linkrel=stylesheethref="../doc/docs.css">

<linkrel="stylesheet" href="../lib/codemirror.css">
<scriptsrc="../lib/codemirror.js"></script>
<scriptsrc="../mode/javascript/javascript.js"></script>
<style>
 .breakpoints {width:.8em;}
 .breakpoint { color:#822; }
 .CodeMirror {border:1px solid #aaa;}
</style>
<divid=nav>
<ahref="https://codemirror.net/5"><h1>CodeMirror</h1><imgid=logosrc="../doc/logo.png"></a>

<ul>
<li><ahref="../index.html">Home</a>
<li><ahref="../doc/manual.html">Manual</a>
<li><ahref="https://github.com/codemirror/codemirror5">Code</a>
</ul>
<ul>
<li><aclass=activehref="#">Breakpoint</a>
</ul>
</div>

<article>
<h2>Breakpoint Demo</h2>
<form><textareaid="code" name="code">
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
 lineNumbers: true,
 gutters: ["CodeMirror-linenumbers", "breakpoints"]
});
editor.on("gutterClick", function(cm, n) {
 var info = cm.lineInfo(n);
 cm.setGutterMarker(n, "breakpoints", info.gutterMarkers ? null : makeMarker());
});

function makeMarker() {
 var marker = document.createElement("div");
 marker.style.color = "#822";
 marker.innerHTML = "●";
 return marker;
}
</textarea></form>

<p>Click the line-number gutter to add or remove 'breakpoints'.</p>

<script>eval(document.getElementById("code").value);</script>

</article>