html5complete.html (1768B)
1 <!doctype html> 2 3 <head> 4 <title>CodeMirror: HTML completion demo</title> 5 <meta charset="utf-8"/> 6 <link rel=stylesheet href="../doc/docs.css"> 7 8 <link rel="stylesheet" href="../lib/codemirror.css"> 9 <link rel="stylesheet" href="../addon/hint/show-hint.css"> 10 <script src="../lib/codemirror.js"></script> 11 <script src="../addon/hint/show-hint.js"></script> 12 <script src="../addon/hint/xml-hint.js"></script> 13 <script src="../addon/hint/html-hint.js"></script> 14 <script src="../mode/xml/xml.js"></script> 15 <script src="../mode/javascript/javascript.js"></script> 16 <script src="../mode/css/css.js"></script> 17 <script src="../mode/htmlmixed/htmlmixed.js"></script> 18 <style type="text/css"> 19 .CodeMirror {border-top: 1px solid #888; border-bottom: 1px solid #888;} 20 </style> 21 </head> 22 23 <body> 24 <div id=nav> 25 <a href="http://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a> 26 27 <ul> 28 <li><a href="../index.html">Home</a> 29 <li><a href="../doc/manual.html">Manual</a> 30 <li><a href="https://github.com/codemirror/codemirror">Code</a> 31 </ul> 32 <ul> 33 <li><a class=active href="#">HTML completion</a> 34 </ul> 35 </div> 36 37 <article> 38 <h2>HTML completion demo</h2> 39 40 <p>Shows the <a href="xmlcomplete.html">XML completer</a> 41 parameterized with information about the tags in HTML. 42 Press <strong>ctrl-space</strong> to activate completion.</p> 43 44 <div id="code"></div> 45 46 <script type="text/javascript"> 47 window.onload = function() { 48 editor = CodeMirror(document.getElementById("code"), { 49 mode: "text/html", 50 extraKeys: {"Ctrl-Space": "autocomplete"}, 51 value: document.documentElement.innerHTML 52 }); 53 }; 54 </script> 55 </article> 56 </body>