github.com/elliott5/community@v0.14.1-0.20160709191136-823126fb026a/app/public/codemirror/mode/htmlmixed/index.html (about)

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