scripts/CodeMirror/mode/htmlmixed/index.html (view raw)
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="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../../doc/logo.png" alt=""></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>
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>tags</code>, which can be used to add custom
76 behavior for specific tags. When given, it should be an object
77 mapping tag names (for example <code>script</code>) to arrays or
78 three-element arrays. Those inner arrays indicate [attributeName,
79 valueRegexp, <a href="../../doc/manual.html#option_mode">modeSpec</a>]
80 specifications. For example, you could use <code>["type", /^foo$/,
81 "foo"]</code> to map the attribute <code>type="foo"</code> to
82 the <code>foo</code> mode. When the first two fields are null
83 (<code>[null, null, "mode"]</code>), the given mode is used for
84 any such tag that doesn't match any of the previously given
85 attributes. For example:</p>
86
87 <pre>var myModeSpec = {
88 name: "htmlmixed",
89 tags: {
90 style: [["type", /^text\/(x-)?scss$/, "text/x-scss"],
91 [null, null, "css"]],
92 custom: [[null, null, "customMode"]]
93 }
94}</pre>
95
96 <p><strong>MIME types defined:</strong> <code>text/html</code>
97 (redefined, only takes effect if you load this parser after the
98 XML parser).</p>
99
100 </article>