You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

52 lines
1.4 KiB

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