marker.html 1.6 KB

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