-
Notifications
You must be signed in to change notification settings - Fork 8
/
Copy pathgrammar-htmlmixed.html
110 lines (103 loc) · 3.6 KB
/
grammar-htmlmixed.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="codemirror/codemirror.css">
<link rel="stylesheet" href="codemirror/addon/lint/lint.css">
<link rel="stylesheet" href="codemirror/addon/hint/show-hint.css">
<link rel="stylesheet" href="codemirror/addon/fold/foldgutter.css" />
<style type="text/css">
body {
position: relative;
}
.CodeMirror {
margin: 0;
position: relative;
width: 100%;
height: 100%;
min-width:500px;
min-height:500px;
}
</style>
<script src="codemirror/codemirror.js"></script>
<script src="codemirror/addon/comment/comment.js"></script>
<script src="codemirror/addon/lint/lint.js"></script>
<script src="codemirror/addon/hint/show-hint.js"></script>
<script src="codemirror/addon/fold/foldcode.js"></script>
<script src="codemirror/addon/fold/foldgutter.js"></script>
<!--<script src="codemirror/addon/fold/xml-fold.js"></script>
<script src="codemirror/addon/fold/comment-fold.js"></script>-->
<script src="../build/codemirror_grammar.js"></script>
<!-- these grammars are used only for demo, better grammars can be used -->
<script src="grammars/javascript.js"></script>
<script src="grammars/css.js"></script>
<script src="grammars/htmlmixed.js"></script>
<script src="demo.js"></script>
<title>CodeMirror: Dynamic Mixed HTML + JavaScript + CSS Grammar Demo</title>
</head>
<body>
<h3>CodeMirror (v.<span id="editor-version">0</span>) Grammar (v.<span id="grammar-version">0</span>): Dynamic Mixed HTML + JavaScript + CSS Grammar</h3>
<textarea id="code" name="code"><?xml version="1.0" encoding="utf-8"?>
<!doctype html>
<html id="id1" id="id2" style = "color: green">
<!-- this is a comment -->
<head id="id1">
<title>HTML Example</title>
<style>
/* Some example CSS */
@import url("something.css");
body {
margin: 0;
padding: 3em 6em;
font-family: tahoma, arial, sans-serif;
color: #000;
}
h1:before, h2:before {
content: "::";
}
</style>
<script type="text/javascript">
/* a comment */
var bar = { foo: [1, 2, 3, {"foo3":"foo4"}],
/* a long
comment */
foo2: 123
};
</script>
<script>
/* this is also javascript content */
var bar = "foo";
</script>
<script type="application/x-something">
/* this is text by default */
var bar = "foo";
</script>
</head>
<body id="id1">
<!-- this is a
long comment -->
<div class="divclass">
<![CDATA[
cdata text in here
<a_tag>, etc..
]]>
</div>
The indentation tries to be <em>somewhat &quot;do what
I mean&quot;</em>... but might not match your style.
</bdy>
<?xml version="1.0" encoding="utf-8"?>
<!doctype html>
</html>
</textarea>
<p></p>
<script>
// <![CDATA[
codemirror_grammar_demo(document.getElementById("code"), [
{language : "htmlmixed", grammar : htmlmixed_grammar}
,{language : "javascript", grammar : js_grammar}
,{language : "css", grammar : css_grammar}
]);
// ]]>
</script>
</body>
</html>