third-party/codemirror-3.15/demo/html5complete.html

   1 <!doctype html>
   2 <html>
   3   <head>
   4     <meta charset="utf-8">
   5     <title>CodeMirror: HTML completion demo</title>
   6     <link rel="stylesheet" href="../lib/codemirror.css">
   7     <script src="../lib/codemirror.js"></script>
   8     <script src="../addon/hint/show-hint.js"></script>
   9     <link rel="stylesheet" href="../addon/hint/show-hint.css">
  10     <script src="../addon/hint/xml-hint.js"></script>
  11     <script src="../addon/hint/html-hint.js"></script>
  12     <script src="../mode/xml/xml.js"></script>
  13     <script src="../mode/javascript/javascript.js"></script>
  14     <script src="../mode/css/css.js"></script>
  15     <script src="../mode/htmlmixed/htmlmixed.js"></script>
  16
  17     <link rel="stylesheet" href="../doc/docs.css">
  18     <style type="text/css">
  19       .CodeMirror {border-top: 1px solid #888; border-bottom: 1px solid #888;}
  20     </style>
  21   </head>
  22   <body>
  23
  24     <h1>HTML completion demo</h1>
  25     <p>Shows the <a href="xmlcomplete.html">XML completer</a>
  26     parameterized with information about the tags in HTML.
  27     Press <strong>ctrl-space</strong> to activate completion.</p>
  28
  29     <div id="code"></div>
  30
  31     <script type="text/javascript">
  32       CodeMirror.commands.autocomplete = function(cm) {
  33           CodeMirror.showHint(cm, CodeMirror.hint.html);
  34       }
  35       window.onload = function() {
  36         editor = CodeMirror(document.getElementById("code"), {
  37           mode: "text/html",
  38           extraKeys: {"Ctrl-Space": "autocomplete"},
  39           value: "<!doctype html>\n<html>\n  " + document.documentElement.innerHTML + "\n</html>"
  40         });
  41       };
  42     </script>
  43   </body>
  44 </html>