matchtags.html (1374B)
1 <!doctype html> 2 3 <title>CodeMirror: Tag Matcher Demo</title> 4 <meta charset="utf-8"/> 5 <link rel=stylesheet href="../doc/docs.css"> 6 7 <link rel="stylesheet" href="../lib/codemirror.css"> 8 <script src="../lib/codemirror.js"></script> 9 <script src="../addon/fold/xml-fold.js"></script> 10 <script src="../addon/edit/matchtags.js"></script> 11 <script src="../mode/xml/xml.js"></script> 12 <style type="text/css"> 13 .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;} 14 </style> 15 <div id=nav> 16 <a href="http://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a> 17 18 <ul> 19 <li><a href="../index.html">Home</a> 20 <li><a href="../doc/manual.html">Manual</a> 21 <li><a href="https://github.com/codemirror/codemirror">Code</a> 22 </ul> 23 <ul> 24 <li><a class=active href="#">Tag Matcher</a> 25 </ul> 26 </div> 27 28 <article> 29 <h2>Tag Matcher Demo</h2> 30 31 32 <div id="editor"></div> 33 34 <script> 35 window.onload = function() { 36 editor = CodeMirror(document.getElementById("editor"), { 37 value: "<html>\n " + document.documentElement.innerHTML + "\n</html>", 38 mode: "text/html", 39 matchTags: {bothTags: true}, 40 extraKeys: {"Ctrl-J": "toMatchingTag"} 41 }); 42 }; 43 </script> 44 45 <p>Put the cursor on or inside a pair of tags to highlight them. 46 Press Ctrl-J to jump to the tag that matches the one under the 47 cursor.</p> 48 </article>