1 | <!DOCTYPE html>
|
2 | <style type="text/css">
|
3 | html, body {
|
4 | background: #CCC;
|
5 | font-size: 14px;
|
6 | margin: 0;
|
7 | height: 100%;
|
8 | }
|
9 | table {
|
10 | width: 100%;
|
11 | border-collapse: collapse;
|
12 | }
|
13 | td {
|
14 | width: 50%;
|
15 | padding: 0;
|
16 | vertical-align: top;
|
17 | }
|
18 | #output, #style {
|
19 | width: 49%;
|
20 | min-height: 99%;
|
21 | display: inline-block;
|
22 | vertical-align: top;
|
23 | }
|
24 | #style {
|
25 | position: absolute;
|
26 | top: 0;
|
27 | height: 100%;
|
28 | left: 4px;
|
29 | width: 49%;
|
30 | background: #FFF;
|
31 | border: 1px solid #999;
|
32 | font: 14px monospace;
|
33 | white-space: pre-wrap;
|
34 | }
|
35 | #output {
|
36 | position: absolute;
|
37 | top: 0;
|
38 | min-height: 100%;
|
39 | right: 0;
|
40 | width: 50%;
|
41 | margin: 0;
|
42 | padding: 4px;
|
43 | box-sizing: border-box;
|
44 | -webkit-box-sizing: border-box;
|
45 | background: #333;
|
46 | }
|
47 |
|
48 | .rule {
|
49 | color: #8CB7D1;
|
50 | }
|
51 | .name {
|
52 | color: #D7AA69;
|
53 | }
|
54 | .value {
|
55 | color: #D7AA69;
|
56 | }
|
57 | .brace-open, .brace-close, .colon, .semicolon {
|
58 | color: #625035;
|
59 | }
|
60 |
|
61 | @media screen, all {
|
62 | body {
|
63 | color: black;
|
64 | }
|
65 | }
|
66 | </style>
|
67 |
|
68 | <textarea id="style">.rule {
|
69 | display: block;
|
70 | }
|
71 | .properties {
|
72 | display: block;
|
73 | }</textarea>
|
74 | <pre id="output"></pre>
|
75 |
|
76 |
|
77 | <script type="text/javascript" src="lib/StyleSheet.js"></script>
|
78 | <script type="text/javascript" src="lib/CSSStyleSheet.js"></script>
|
79 | <script type="text/javascript" src="lib/MediaList.js"></script>
|
80 | <script type="text/javascript" src="lib/CSSRule.js"></script>
|
81 | <script type="text/javascript" src="lib/CSSStyleRule.js"></script>
|
82 | <script type="text/javascript" src="lib/CSSMediaRule.js"></script>
|
83 | <script type="text/javascript" src="lib/CSSStyleDeclaration.js"></script>
|
84 | <script type="text/javascript" src="lib/parse.js"></script>
|
85 | <script type="text/javascript" src="lib/parse.js"></script>
|
86 | <script type="text/javascript" src="plugins/toHTML.js"></script>
|
87 | <script type="text/javascript">
|
88 | CSSStyleSheet.prototype.toHTML = toHTML;
|
89 | window.onload = function(){
|
90 | var style = document.getElementById("style");
|
91 | var output = document.getElementById("output")
|
92 |
|
93 | function outputUpdated(){
|
94 | output.innerHTML = parse(style.value).toHTML();
|
95 | }
|
96 |
|
97 | style.onkeyup = outputUpdated;
|
98 | outputUpdated();
|
99 | }
|
100 | </script> |
\ | No newline at end of file |