third-party/codemirror-3.15/mode/htmlmixed/index.html

   1 <!doctype html>
   2 <html>
   3   <head>
   4     <meta charset="utf-8">
   5     <title>CodeMirror: HTML mixed mode</title>
   6     <link rel="stylesheet" href="../../lib/codemirror.css">
   7     <script src="../../lib/codemirror.js"></script>
   8     <script src="../xml/xml.js"></script>
   9     <script src="../javascript/javascript.js"></script>
  10     <script src="../css/css.js"></script>
  11     <script src="../vbscript/vbscript.js"></script>
  12     <script src="htmlmixed.js"></script>
  13     <link rel="stylesheet" href="../../doc/docs.css">
  14     <style>.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</style>
  15   </head>
  16   <body>
  17     <h1>CodeMirror: HTML mixed mode</h1>
  18     <form><textarea id="code" name="code">
  19 <html style="color: green">
  20   <!-- this is a comment -->
  21   <head>
  22     <title>Mixed HTML Example</title>
  23     <style type="text/css">
  24       h1 {font-family: comic sans; color: #f0f;}
  25       div {background: yellow !important;}
  26       body {
  27         max-width: 50em;
  28         margin: 1em 2em 1em 5em;
  29       }
  30     </style>
  31   </head>
  32   <body>
  33     <h1>Mixed HTML Example</h1>
  34     <script>
  35       function jsFunc(arg1, arg2) {
  36         if (arg1 && arg2) document.body.innerHTML = "achoo";
  37       }
  38     </script>
  39   </body>
  40 </html>
  41 </textarea></form>
  42     <script>
  43       // Define an extended mixed-mode that understands vbscript and
  44       // leaves mustache/handlebars embedded templates in html mode
  45       var mixedMode = {
  46         name: "htmlmixed",
  47         scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
  48                        mode: null},
  49                       {matches: /(text|application)\/(x-)?vb(a|script)/i,
  50                        mode: "vbscript"}]
  51       };
  52       var editor = CodeMirror.fromTextArea(document.getElementById("code"), {mode: mixedMode, tabMode: "indent"});
  53     </script>
  54
  55     <p>The HTML mixed mode depends on the XML, JavaScript, and CSS modes.</p>
  56
  57     <p>It takes an optional mode configuration
  58     option, <code>scriptTypes</code>, which can be used to add custom
  59     behavior for specific <code>&lt;script type="..."></code> tags. If
  60     given, it should hold an array of <code>{matches, mode}</code>
  61     objects, where <code>matches</code> is a string or regexp that
  62     matches the script type, and <code>mode</code> is
  63     either <code>null</code>, for script types that should stay in
  64     HTML mode, or a <a href="../../doc/manual.html#option_mode">mode
  65     spec</a> corresponding to the mode that should be used for the
  66     script.</p>
  67
  68     <p><strong>MIME types defined:</strong> <code>text/html</code>
  69     (redefined, only takes effect if you load this parser after the
  70     XML parser).</p>
  71
  72   </body>
  73 </html>