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.

48 lines
1.3 KiB

2 months ago
  1. <!doctype html>
  2. <title>CodeMirror: Tag Matcher 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="../addon/fold/xml-fold.js"></script>
  8. <script src="../addon/edit/matchtags.js"></script>
  9. <script src="../mode/xml/xml.js"></script>
  10. <style>
  11. .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
  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="#">Tag Matcher</a>
  22. </ul>
  23. </div>
  24. <article>
  25. <h2>Tag Matcher Demo</h2>
  26. <div id="editor"></div>
  27. <script>
  28. window.onload = function() {
  29. editor = CodeMirror(document.getElementById("editor"), {
  30. value: "<html>\n " + document.documentElement.innerHTML + "\n</html>",
  31. mode: "text/html",
  32. matchTags: {bothTags: true},
  33. extraKeys: {"Ctrl-J": "toMatchingTag"}
  34. });
  35. };
  36. </script>
  37. <p>Put the cursor on or inside a pair of tags to highlight them.
  38. Press Ctrl-J to jump to the tag that matches the one under the
  39. cursor.</p>
  40. </article>