3 <title>CodeMirror: HTML mixed mode
</title>
4 <meta charset=
"utf-8"/>
5 <link rel=stylesheet
href=
"../../doc/docs.css">
7 <link rel=
"stylesheet" href=
"../../lib/codemirror.css">
8 <script src=
"../../lib/codemirror.js"></script>
9 <script src=
"../xml/xml.js"></script>
10 <script src=
"../javascript/javascript.js"></script>
11 <script src=
"../css/css.js"></script>
12 <script src=
"../vbscript/vbscript.js"></script>
13 <script src=
"htmlmixed.js"></script>
14 <style>.CodeMirror {border-top:
1px solid black; border-bottom:
1px solid black;}
</style>
16 <a href=
"http://codemirror.net"><img id=logo
src=
"../../doc/logo.png"></a>
19 <li><a href=
"../../index.html">Home
</a>
20 <li><a href=
"../../doc/manual.html">Manual
</a>
21 <li><a href=
"https://github.com/marijnh/codemirror">Code
</a>
24 <li><a href=
"../index.html">Language modes
</a>
25 <li><a class=active
href=
"#">HTML mixed
</a>
30 <h2>HTML mixed mode
</h2>
31 <form><textarea id=
"code" name=
"code">
32 <html style=
"color: green">
33 <!-- this is a comment -->
35 <title>Mixed HTML Example
</title>
36 <style type=
"text/css">
37 h1 {font-family: comic sans; color: #f0f;}
38 div {background: yellow !important;}
41 margin:
1em
2em
1em
5em;
46 <h1>Mixed HTML Example
</h1>
48 function jsFunc(arg1, arg2) {
49 if (arg1 && arg2) document.body.innerHTML =
"achoo";
56 // Define an extended mixed-mode that understands vbscript and
57 // leaves mustache/handlebars embedded templates in html mode
60 scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
62 {matches: /(text|application)\/(x-)?vb(a|script)/i,
65 var editor = CodeMirror.fromTextArea(document.getElementById(
"code"), {mode: mixedMode});
68 <p>The HTML mixed mode depends on the XML, JavaScript, and CSS modes.
</p>
70 <p>It takes an optional mode configuration
71 option,
<code>scriptTypes
</code>, which can be used to add custom
72 behavior for specific
<code><script
type=
"..."></code> tags. If
73 given, it should hold an array of
<code>{matches, mode}
</code>
74 objects, where
<code>matches
</code> is a string or regexp that
75 matches the script type, and
<code>mode
</code> is
76 either
<code>null
</code>, for script types that should stay in
77 HTML mode, or a
<a href=
"../../doc/manual.html#option_mode">mode
78 spec
</a> corresponding to the mode that should be used for the
81 <p><strong>MIME types defined:
</strong> <code>text/html
</code>
82 (redefined, only takes effect if you load this parser after the