to-be-integrated/third-party/codemirror-3.15/demo/matchtags.html

   1 <!doctype html>
   2 <html>
   3   <head>
   4     <meta charset="utf-8">
   5     <title>CodeMirror: Tag Matcher Demo</title>
   6     <link rel="stylesheet" href="../lib/codemirror.css">
   7     <script src="../lib/codemirror.js"></script>
   8     <script src="../addon/fold/xml-fold.js"></script>
   9     <script src="../addon/edit/matchtags.js"></script>
  10     <script src="../mode/xml/xml.js"></script>
  11     <link rel="stylesheet" href="../doc/docs.css">
  12
  13     <style type="text/css">
  14       .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
  15       .CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
  16     </style>
  17   </head>
  18   <body>
  19     <h1>CodeMirror: Tag Matcher Demo</h1>
  20
  21     <div id="editor"></div>
  22
  23     <script>
  24 window.onload = function() {
  25   editor = CodeMirror(document.getElementById("editor"), {
  26     value: "<html>\n  " + document.documentElement.innerHTML + "\n</html>",
  27     mode: "text/html",
  28     matchTags: true,
  29     extraKeys: {"Ctrl-J": "toMatchingTag"}
  30   });
  31 };
  32     </script>
  33
  34     <p>Put the cursor on or inside a pair of tags to highlight them.
  35     Press Ctrl-J to jump to the tag that matches the one under the
  36     cursor.</p>
  37   </body>
  38 </html>