hyde_admin 0.0.1 → 0.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/.gitattributes +3 -0
- data/.idea/hyde_admin.iml +2 -0
- data/.idea/vcs.xml +6 -0
- data/CHANGELOG.md +35 -0
- data/README.md +23 -0
- data/TODO.md +3 -0
- data/bin/admin_views/admin_layout.html.erb +204 -108
- data/bin/admin_views/configuration.erb +13 -0
- data/bin/admin_views/dashboard.erb +1 -1
- data/bin/admin_views/editor_html.erb +24 -0
- data/bin/admin_views/editor_js.erb +120 -0
- data/bin/admin_views/files/edit.erb +30 -0
- data/bin/admin_views/files/listing.erb +111 -0
- data/bin/admin_views/partials/image_element.html.erb +4 -0
- data/bin/admin_views/partials/images_page.html.erb +8 -0
- data/bin/admin_views/posts/edit.erb +158 -0
- data/bin/admin_views/posts/listing.erb +37 -0
- data/bin/admin_views/upload_image_form.erb +45 -0
- data/bin/fslightbox/fslightbox.js +1 -0
- data/bin/hyde_admin +3 -0
- data/bin/hyde_admin.ru +306 -56
- data/bin/hyde_admin.yml +12 -5
- data/bin/hyde_assets/hyde_admin.css +37 -0
- data/bin/hyde_assets/hyde_admin.js +24 -0
- data/bin/i18n/en.yml +77 -1
- data/bin/i18n/fr.yml +77 -1
- data/bin/lib/codemirror.css +349 -0
- data/bin/lib/codemirror.js +9833 -0
- data/bin/mode/css/css.js +864 -0
- data/bin/mode/css/gss.html +104 -0
- data/bin/mode/css/gss_test.js +17 -0
- data/bin/mode/css/index.html +81 -0
- data/bin/mode/css/less.html +152 -0
- data/bin/mode/css/less_test.js +54 -0
- data/bin/mode/css/scss.html +158 -0
- data/bin/mode/css/scss_test.js +110 -0
- data/bin/mode/css/test.js +217 -0
- data/bin/mode/htmlembedded/htmlembedded.js +37 -0
- data/bin/mode/htmlembedded/index.html +60 -0
- data/bin/mode/htmlmixed/htmlmixed.js +153 -0
- data/bin/mode/htmlmixed/index.html +100 -0
- data/bin/mode/javascript/index.html +118 -0
- data/bin/mode/javascript/javascript.js +959 -0
- data/bin/mode/javascript/json-ld.html +72 -0
- data/bin/mode/javascript/test.js +521 -0
- data/bin/mode/javascript/typescript.html +62 -0
- data/bin/mode/markdown/index.html +418 -0
- data/bin/mode/markdown/markdown.js +886 -0
- data/bin/mode/markdown/test.js +1319 -0
- data/bin/mode/ruby/index.html +183 -0
- data/bin/mode/ruby/ruby.js +303 -0
- data/bin/mode/ruby/test.js +23 -0
- data/bin/mode/sass/index.html +68 -0
- data/bin/mode/sass/sass.js +459 -0
- data/bin/mode/sass/test.js +122 -0
- data/bin/mode/spreadsheet/index.html +42 -0
- data/bin/mode/spreadsheet/spreadsheet.js +112 -0
- data/bin/mode/xml/index.html +61 -0
- data/bin/mode/xml/test.js +51 -0
- data/bin/mode/xml/xml.js +417 -0
- data/bin/mode/yaml/index.html +80 -0
- data/bin/mode/yaml/yaml.js +120 -0
- data/bin/mode/yaml-frontmatter/index.html +121 -0
- data/bin/mode/yaml-frontmatter/yaml-frontmatter.js +72 -0
- data/hyde_admin.gemspec +7 -1
- data/lib/hyde_admin/version.rb +1 -1
- metadata +131 -7
- data/bin/admin_views/edit.erb +0 -57
- data/bin/admin_views/listing.erb +0 -32
- data/bin/hyde_admin.sh +0 -3
@@ -0,0 +1,104 @@
|
|
1
|
+
<!doctype html>
|
2
|
+
|
3
|
+
<title>CodeMirror: Closure Stylesheets (GSS) 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
|
+
<link rel="stylesheet" href="../../addon/hint/show-hint.css">
|
9
|
+
<script src="../../lib/codemirror.js"></script>
|
10
|
+
<script src="css.js"></script>
|
11
|
+
<script src="../../addon/edit/matchbrackets.js"></script>
|
12
|
+
<script src="../../addon/hint/show-hint.js"></script>
|
13
|
+
<script src="../../addon/hint/css-hint.js"></script>
|
14
|
+
<style>.CodeMirror {background: #f8f8f8;}</style>
|
15
|
+
<div id=nav>
|
16
|
+
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../../doc/logo.png" alt=""></a>
|
17
|
+
|
18
|
+
<ul>
|
19
|
+
<li><a href="../../index.html">Home</a>
|
20
|
+
<li><a href="../../doc/manual.html">Manual</a>
|
21
|
+
<li><a href="https://github.com/codemirror/codemirror">Code</a>
|
22
|
+
</ul>
|
23
|
+
<ul>
|
24
|
+
<li><a href="../index.html">Language modes</a>
|
25
|
+
<li><a class=active href="#">Closure Stylesheets (GSS)</a>
|
26
|
+
</ul>
|
27
|
+
</div>
|
28
|
+
|
29
|
+
<article>
|
30
|
+
<h2>Closure Stylesheets (GSS) mode</h2>
|
31
|
+
<form><textarea id="code" name="code">
|
32
|
+
/* Some example Closure Stylesheets */
|
33
|
+
|
34
|
+
@provide 'some.styles';
|
35
|
+
|
36
|
+
@require 'other.styles';
|
37
|
+
|
38
|
+
@component {
|
39
|
+
|
40
|
+
@def FONT_FAMILY "Times New Roman", Georgia, Serif;
|
41
|
+
@def FONT_SIZE_NORMAL 15px;
|
42
|
+
@def FONT_NORMAL normal FONT_SIZE_NORMAL FONT_FAMILY;
|
43
|
+
|
44
|
+
@def BG_COLOR rgb(235, 239, 249);
|
45
|
+
|
46
|
+
@def DIALOG_BORDER_COLOR rgb(107, 144, 218);
|
47
|
+
@def DIALOG_BG_COLOR BG_COLOR;
|
48
|
+
|
49
|
+
@def LEFT_HAND_NAV_WIDTH 180px;
|
50
|
+
@def LEFT_HAND_NAV_PADDING 3px;
|
51
|
+
|
52
|
+
@defmixin size(WIDTH, HEIGHT) {
|
53
|
+
width: WIDTH;
|
54
|
+
height: HEIGHT;
|
55
|
+
}
|
56
|
+
|
57
|
+
body {
|
58
|
+
background-color: BG_COLOR;
|
59
|
+
margin: 0;
|
60
|
+
padding: 3em 6em;
|
61
|
+
font: FONT_NORMAL;
|
62
|
+
color: #000;
|
63
|
+
}
|
64
|
+
|
65
|
+
#navigation a {
|
66
|
+
font-weight: bold;
|
67
|
+
text-decoration: none !important;
|
68
|
+
}
|
69
|
+
|
70
|
+
.dialog {
|
71
|
+
background-color: DIALOG_BG_COLOR;
|
72
|
+
border: 1px solid DIALOG_BORDER_COLOR;
|
73
|
+
}
|
74
|
+
|
75
|
+
.content {
|
76
|
+
position: absolute;
|
77
|
+
margin-left: add(LEFT_HAND_NAV_PADDING, /* padding left */
|
78
|
+
LEFT_HAND_NAV_WIDTH,
|
79
|
+
LEFT_HAND_NAV_PADDING); /* padding right */
|
80
|
+
|
81
|
+
}
|
82
|
+
|
83
|
+
.logo {
|
84
|
+
@mixin size(150px, 55px);
|
85
|
+
background-image: url('http://www.google.com/images/logo_sm.gif');
|
86
|
+
}
|
87
|
+
|
88
|
+
}
|
89
|
+
</textarea></form>
|
90
|
+
<script>
|
91
|
+
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
|
92
|
+
extraKeys: {"Ctrl-Space": "autocomplete"},
|
93
|
+
lineNumbers: true,
|
94
|
+
matchBrackets: true,
|
95
|
+
mode: "text/x-gss"
|
96
|
+
});
|
97
|
+
</script>
|
98
|
+
|
99
|
+
<p>A mode for <a href="https://github.com/google/closure-stylesheets">Closure Stylesheets</a> (GSS).</p>
|
100
|
+
<p><strong>MIME type defined:</strong> <code>text/x-gss</code>.</p>
|
101
|
+
|
102
|
+
<p><strong>Parsing/Highlighting Tests:</strong> <a href="../../test/index.html#gss_*">normal</a>, <a href="../../test/index.html#verbose,gss_*">verbose</a>.</p>
|
103
|
+
|
104
|
+
</article>
|
@@ -0,0 +1,17 @@
|
|
1
|
+
// CodeMirror, copyright (c) by Marijn Haverbeke and others
|
2
|
+
// Distributed under an MIT license: https://codemirror.net/LICENSE
|
3
|
+
|
4
|
+
(function() {
|
5
|
+
"use strict";
|
6
|
+
|
7
|
+
var mode = CodeMirror.getMode({indentUnit: 2}, "text/x-gss");
|
8
|
+
function MT(name) { test.mode(name, mode, Array.prototype.slice.call(arguments, 1), "gss"); }
|
9
|
+
|
10
|
+
MT("atComponent",
|
11
|
+
"[def @component] {",
|
12
|
+
"[tag foo] {",
|
13
|
+
" [property color]: [keyword black];",
|
14
|
+
"}",
|
15
|
+
"}");
|
16
|
+
|
17
|
+
})();
|
@@ -0,0 +1,81 @@
|
|
1
|
+
<!doctype html>
|
2
|
+
|
3
|
+
<title>CodeMirror: CSS 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
|
+
<link rel="stylesheet" href="../../addon/hint/show-hint.css">
|
9
|
+
<script src="../../lib/codemirror.js"></script>
|
10
|
+
<script src="css.js"></script>
|
11
|
+
<script src="../../addon/hint/show-hint.js"></script>
|
12
|
+
<script src="../../addon/hint/css-hint.js"></script>
|
13
|
+
<style>.CodeMirror {background: #f8f8f8;}</style>
|
14
|
+
<div id=nav>
|
15
|
+
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../../doc/logo.png" alt=""></a>
|
16
|
+
|
17
|
+
<ul>
|
18
|
+
<li><a href="../../index.html">Home</a>
|
19
|
+
<li><a href="../../doc/manual.html">Manual</a>
|
20
|
+
<li><a href="https://github.com/codemirror/codemirror">Code</a>
|
21
|
+
</ul>
|
22
|
+
<ul>
|
23
|
+
<li><a href="../index.html">Language modes</a>
|
24
|
+
<li><a class=active href="#">CSS</a>
|
25
|
+
</ul>
|
26
|
+
</div>
|
27
|
+
|
28
|
+
<article>
|
29
|
+
<h2>CSS mode</h2>
|
30
|
+
<form><textarea id="code" name="code">
|
31
|
+
/* Some example CSS */
|
32
|
+
|
33
|
+
@import url("something.css");
|
34
|
+
|
35
|
+
body {
|
36
|
+
margin: 0;
|
37
|
+
padding: 3em 6em;
|
38
|
+
font-family: tahoma, arial, sans-serif;
|
39
|
+
color: #000;
|
40
|
+
}
|
41
|
+
|
42
|
+
#navigation a {
|
43
|
+
font-weight: bold;
|
44
|
+
text-decoration: none !important;
|
45
|
+
}
|
46
|
+
|
47
|
+
h1 {
|
48
|
+
font-size: 2.5em;
|
49
|
+
}
|
50
|
+
|
51
|
+
h2 {
|
52
|
+
font-size: 1.7em;
|
53
|
+
}
|
54
|
+
|
55
|
+
h1:before, h2:before {
|
56
|
+
content: "::";
|
57
|
+
}
|
58
|
+
|
59
|
+
code {
|
60
|
+
font-family: courier, monospace;
|
61
|
+
font-size: 80%;
|
62
|
+
color: #418A8A;
|
63
|
+
}
|
64
|
+
</textarea></form>
|
65
|
+
<script>
|
66
|
+
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
|
67
|
+
extraKeys: {"Ctrl-Space": "autocomplete"}
|
68
|
+
});
|
69
|
+
</script>
|
70
|
+
|
71
|
+
<p>CSS mode supports this option:</p>
|
72
|
+
<d1>
|
73
|
+
<dt><code><strong>highlightNonStandardPropertyKeywords</strong>: boolean</code></dt>
|
74
|
+
<dd>Whether to highlight non-standard CSS property keywords such as <code>margin-inline</code> or <code>zoom</code> (default: <code>true</code>).</dd>
|
75
|
+
</d1>
|
76
|
+
|
77
|
+
<p><strong>MIME types defined:</strong> <code>text/css</code>, <code>text/x-scss</code> (<a href="scss.html">demo</a>), <code>text/x-less</code> (<a href="less.html">demo</a>).</p>
|
78
|
+
|
79
|
+
<p><strong>Parsing/Highlighting Tests:</strong> <a href="../../test/index.html#css_*">normal</a>, <a href="../../test/index.html#verbose,css_*">verbose</a>.</p>
|
80
|
+
|
81
|
+
</article>
|
@@ -0,0 +1,152 @@
|
|
1
|
+
<!doctype html>
|
2
|
+
|
3
|
+
<title>CodeMirror: LESS 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/edit/matchbrackets.js"></script>
|
10
|
+
<script src="css.js"></script>
|
11
|
+
<style>.CodeMirror {border: 1px solid #ddd; line-height: 1.2;}</style>
|
12
|
+
<div id=nav>
|
13
|
+
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../../doc/logo.png" alt=""></a>
|
14
|
+
|
15
|
+
<ul>
|
16
|
+
<li><a href="../../index.html">Home</a>
|
17
|
+
<li><a href="../../doc/manual.html">Manual</a>
|
18
|
+
<li><a href="https://github.com/codemirror/codemirror">Code</a>
|
19
|
+
</ul>
|
20
|
+
<ul>
|
21
|
+
<li><a href="../index.html">Language modes</a>
|
22
|
+
<li><a class=active href="#">LESS</a>
|
23
|
+
</ul>
|
24
|
+
</div>
|
25
|
+
|
26
|
+
<article>
|
27
|
+
<h2>LESS mode</h2>
|
28
|
+
<form><textarea id="code" name="code">@media screen and (device-aspect-ratio: 16/9) { … }
|
29
|
+
@media screen and (device-aspect-ratio: 1280/720) { … }
|
30
|
+
@media screen and (device-aspect-ratio: 2560/1440) { … }
|
31
|
+
|
32
|
+
html:lang(fr-be)
|
33
|
+
|
34
|
+
tr:nth-child(2n+1) /* represents every odd row of an HTML table */
|
35
|
+
|
36
|
+
img:nth-of-type(2n+1) { float: right; }
|
37
|
+
img:nth-of-type(2n) { float: left; }
|
38
|
+
|
39
|
+
body > h2:not(:first-of-type):not(:last-of-type)
|
40
|
+
|
41
|
+
html|*:not(:link):not(:visited)
|
42
|
+
*|*:not(:hover)
|
43
|
+
p::first-line { text-transform: uppercase }
|
44
|
+
|
45
|
+
@namespace foo url(http://www.example.com);
|
46
|
+
foo|h1 { color: blue } /* first rule */
|
47
|
+
|
48
|
+
span[hello="Ocean"][goodbye="Land"]
|
49
|
+
|
50
|
+
E[foo]{
|
51
|
+
padding:65px;
|
52
|
+
}
|
53
|
+
|
54
|
+
input[type="search"]::-webkit-search-decoration,
|
55
|
+
input[type="search"]::-webkit-search-cancel-button {
|
56
|
+
-webkit-appearance: none; // Inner-padding issues in Chrome OSX, Safari 5
|
57
|
+
}
|
58
|
+
button::-moz-focus-inner,
|
59
|
+
input::-moz-focus-inner { // Inner padding and border oddities in FF3/4
|
60
|
+
padding: 0;
|
61
|
+
border: 0;
|
62
|
+
}
|
63
|
+
.btn {
|
64
|
+
// reset here as of 2.0.3 due to Recess property order
|
65
|
+
border-color: #ccc;
|
66
|
+
border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);
|
67
|
+
}
|
68
|
+
fieldset span button, fieldset span input[type="file"] {
|
69
|
+
font-size:12px;
|
70
|
+
font-family:Arial, Helvetica, sans-serif;
|
71
|
+
}
|
72
|
+
|
73
|
+
.rounded-corners (@radius: 5px) {
|
74
|
+
border-radius: @radius;
|
75
|
+
-webkit-border-radius: @radius;
|
76
|
+
-moz-border-radius: @radius;
|
77
|
+
}
|
78
|
+
|
79
|
+
@import url("something.css");
|
80
|
+
|
81
|
+
@light-blue: hsl(190, 50%, 65%);
|
82
|
+
|
83
|
+
#menu {
|
84
|
+
position: absolute;
|
85
|
+
width: 100%;
|
86
|
+
z-index: 3;
|
87
|
+
clear: both;
|
88
|
+
display: block;
|
89
|
+
background-color: @blue;
|
90
|
+
height: 42px;
|
91
|
+
border-top: 2px solid lighten(@alpha-blue, 20%);
|
92
|
+
border-bottom: 2px solid darken(@alpha-blue, 25%);
|
93
|
+
.box-shadow(0, 1px, 8px, 0.6);
|
94
|
+
-moz-box-shadow: 0 0 0 #000; // Because firefox sucks.
|
95
|
+
|
96
|
+
&.docked {
|
97
|
+
background-color: hsla(210, 60%, 40%, 0.4);
|
98
|
+
}
|
99
|
+
&:hover {
|
100
|
+
background-color: @blue;
|
101
|
+
}
|
102
|
+
|
103
|
+
#dropdown {
|
104
|
+
margin: 0 0 0 117px;
|
105
|
+
padding: 0;
|
106
|
+
padding-top: 5px;
|
107
|
+
display: none;
|
108
|
+
width: 190px;
|
109
|
+
border-top: 2px solid @medium;
|
110
|
+
color: @highlight;
|
111
|
+
border: 2px solid darken(@medium, 25%);
|
112
|
+
border-left-color: darken(@medium, 15%);
|
113
|
+
border-right-color: darken(@medium, 15%);
|
114
|
+
border-top-width: 0;
|
115
|
+
background-color: darken(@medium, 10%);
|
116
|
+
ul {
|
117
|
+
padding: 0px;
|
118
|
+
}
|
119
|
+
li {
|
120
|
+
font-size: 14px;
|
121
|
+
display: block;
|
122
|
+
text-align: left;
|
123
|
+
padding: 0;
|
124
|
+
border: 0;
|
125
|
+
a {
|
126
|
+
display: block;
|
127
|
+
padding: 0px 15px;
|
128
|
+
text-decoration: none;
|
129
|
+
color: white;
|
130
|
+
&:hover {
|
131
|
+
background-color: darken(@medium, 15%);
|
132
|
+
text-decoration: none;
|
133
|
+
}
|
134
|
+
}
|
135
|
+
}
|
136
|
+
.border-radius(5px, bottom);
|
137
|
+
.box-shadow(0, 6px, 8px, 0.5);
|
138
|
+
}
|
139
|
+
}
|
140
|
+
</textarea></form>
|
141
|
+
<script>
|
142
|
+
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
|
143
|
+
lineNumbers: true,
|
144
|
+
matchBrackets: true,
|
145
|
+
mode: "text/x-less"
|
146
|
+
});
|
147
|
+
</script>
|
148
|
+
|
149
|
+
<p>The LESS mode is a sub-mode of the <a href="index.html">CSS mode</a> (defined in <code>css.js</code>).</p>
|
150
|
+
|
151
|
+
<p><strong>Parsing/Highlighting Tests:</strong> <a href="../../test/index.html#less_*">normal</a>, <a href="../../test/index.html#verbose,less_*">verbose</a>.</p>
|
152
|
+
</article>
|
@@ -0,0 +1,54 @@
|
|
1
|
+
// CodeMirror, copyright (c) by Marijn Haverbeke and others
|
2
|
+
// Distributed under an MIT license: https://codemirror.net/LICENSE
|
3
|
+
|
4
|
+
(function() {
|
5
|
+
"use strict";
|
6
|
+
|
7
|
+
var mode = CodeMirror.getMode({indentUnit: 2}, "text/x-less");
|
8
|
+
function MT(name) { test.mode(name, mode, Array.prototype.slice.call(arguments, 1), "less"); }
|
9
|
+
|
10
|
+
MT("variable",
|
11
|
+
"[variable-2 @base]: [atom #f04615];",
|
12
|
+
"[qualifier .class] {",
|
13
|
+
" [property width]: [variable&callee percentage]([number 0.5]); [comment // returns `50%`]",
|
14
|
+
" [property color]: [variable&callee saturate]([variable-2 @base], [number 5%]);",
|
15
|
+
"}");
|
16
|
+
|
17
|
+
MT("amp",
|
18
|
+
"[qualifier .child], [qualifier .sibling] {",
|
19
|
+
" [qualifier .parent] [atom &] {",
|
20
|
+
" [property color]: [keyword black];",
|
21
|
+
" }",
|
22
|
+
" [atom &] + [atom &] {",
|
23
|
+
" [property color]: [keyword red];",
|
24
|
+
" }",
|
25
|
+
"}");
|
26
|
+
|
27
|
+
MT("mixin",
|
28
|
+
"[qualifier .mixin] ([variable dark]; [variable-2 @color]) {",
|
29
|
+
" [property color]: [variable&callee darken]([variable-2 @color], [number 10%]);",
|
30
|
+
"}",
|
31
|
+
"[qualifier .mixin] ([variable light]; [variable-2 @color]) {",
|
32
|
+
" [property color]: [variable&callee lighten]([variable-2 @color], [number 10%]);",
|
33
|
+
"}",
|
34
|
+
"[qualifier .mixin] ([variable-2 @_]; [variable-2 @color]) {",
|
35
|
+
" [property display]: [atom block];",
|
36
|
+
"}",
|
37
|
+
"[variable-2 @switch]: [variable light];",
|
38
|
+
"[qualifier .class] {",
|
39
|
+
" [qualifier .mixin]([variable-2 @switch]; [atom #888]);",
|
40
|
+
"}");
|
41
|
+
|
42
|
+
MT("nest",
|
43
|
+
"[qualifier .one] {",
|
44
|
+
" [def @media] ([property width]: [number 400px]) {",
|
45
|
+
" [property font-size]: [number 1.2em];",
|
46
|
+
" [def @media] [attribute print] [keyword and] [property color] {",
|
47
|
+
" [property color]: [keyword blue];",
|
48
|
+
" }",
|
49
|
+
" }",
|
50
|
+
"}");
|
51
|
+
|
52
|
+
|
53
|
+
MT("interpolation", ".@{[variable foo]} { [property font-weight]: [atom bold]; }");
|
54
|
+
})();
|
@@ -0,0 +1,158 @@
|
|
1
|
+
<!doctype html>
|
2
|
+
|
3
|
+
<title>CodeMirror: SCSS 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/edit/matchbrackets.js"></script>
|
10
|
+
<script src="css.js"></script>
|
11
|
+
<style>.CodeMirror {background: #f8f8f8;}</style>
|
12
|
+
<div id=nav>
|
13
|
+
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../../doc/logo.png" alt=""></a>
|
14
|
+
|
15
|
+
<ul>
|
16
|
+
<li><a href="../../index.html">Home</a>
|
17
|
+
<li><a href="../../doc/manual.html">Manual</a>
|
18
|
+
<li><a href="https://github.com/codemirror/codemirror">Code</a>
|
19
|
+
</ul>
|
20
|
+
<ul>
|
21
|
+
<li><a href="../index.html">Language modes</a>
|
22
|
+
<li><a class=active href="#">SCSS</a>
|
23
|
+
</ul>
|
24
|
+
</div>
|
25
|
+
|
26
|
+
<article>
|
27
|
+
<h2>SCSS mode</h2>
|
28
|
+
<form><textarea id="code" name="code">
|
29
|
+
/* Some example SCSS */
|
30
|
+
|
31
|
+
@import "compass/css3";
|
32
|
+
$variable: #333;
|
33
|
+
|
34
|
+
$blue: #3bbfce;
|
35
|
+
$margin: 16px;
|
36
|
+
|
37
|
+
.content-navigation {
|
38
|
+
#nested {
|
39
|
+
background-color: black;
|
40
|
+
}
|
41
|
+
border-color: $blue;
|
42
|
+
color:
|
43
|
+
darken($blue, 9%);
|
44
|
+
}
|
45
|
+
|
46
|
+
.border {
|
47
|
+
padding: $margin / 2;
|
48
|
+
margin: $margin / 2;
|
49
|
+
border-color: $blue;
|
50
|
+
}
|
51
|
+
|
52
|
+
@mixin table-base {
|
53
|
+
th {
|
54
|
+
text-align: center;
|
55
|
+
font-weight: bold;
|
56
|
+
}
|
57
|
+
td, th {padding: 2px}
|
58
|
+
}
|
59
|
+
|
60
|
+
table.hl {
|
61
|
+
margin: 2em 0;
|
62
|
+
td.ln {
|
63
|
+
text-align: right;
|
64
|
+
}
|
65
|
+
}
|
66
|
+
|
67
|
+
li {
|
68
|
+
font: {
|
69
|
+
family: serif;
|
70
|
+
weight: bold;
|
71
|
+
size: 1.2em;
|
72
|
+
}
|
73
|
+
}
|
74
|
+
|
75
|
+
@mixin left($dist) {
|
76
|
+
float: left;
|
77
|
+
margin-left: $dist;
|
78
|
+
}
|
79
|
+
|
80
|
+
#data {
|
81
|
+
@include left(10px);
|
82
|
+
@include table-base;
|
83
|
+
}
|
84
|
+
|
85
|
+
.source {
|
86
|
+
@include flow-into(target);
|
87
|
+
border: 10px solid green;
|
88
|
+
margin: 20px;
|
89
|
+
width: 200px; }
|
90
|
+
|
91
|
+
.new-container {
|
92
|
+
@include flow-from(target);
|
93
|
+
border: 10px solid red;
|
94
|
+
margin: 20px;
|
95
|
+
width: 200px; }
|
96
|
+
|
97
|
+
body {
|
98
|
+
margin: 0;
|
99
|
+
padding: 3em 6em;
|
100
|
+
font-family: tahoma, arial, sans-serif;
|
101
|
+
color: #000;
|
102
|
+
}
|
103
|
+
|
104
|
+
@mixin yellow() {
|
105
|
+
background: yellow;
|
106
|
+
}
|
107
|
+
|
108
|
+
.big {
|
109
|
+
font-size: 14px;
|
110
|
+
}
|
111
|
+
|
112
|
+
.nested {
|
113
|
+
@include border-radius(3px);
|
114
|
+
@extend .big;
|
115
|
+
p {
|
116
|
+
background: whitesmoke;
|
117
|
+
a {
|
118
|
+
color: red;
|
119
|
+
}
|
120
|
+
}
|
121
|
+
}
|
122
|
+
|
123
|
+
#navigation a {
|
124
|
+
font-weight: bold;
|
125
|
+
text-decoration: none !important;
|
126
|
+
}
|
127
|
+
|
128
|
+
h1 {
|
129
|
+
font-size: 2.5em;
|
130
|
+
}
|
131
|
+
|
132
|
+
h2 {
|
133
|
+
font-size: 1.7em;
|
134
|
+
}
|
135
|
+
|
136
|
+
h1:before, h2:before {
|
137
|
+
content: "::";
|
138
|
+
}
|
139
|
+
|
140
|
+
code {
|
141
|
+
font-family: courier, monospace;
|
142
|
+
font-size: 80%;
|
143
|
+
color: #418A8A;
|
144
|
+
}
|
145
|
+
</textarea></form>
|
146
|
+
<script>
|
147
|
+
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
|
148
|
+
lineNumbers: true,
|
149
|
+
matchBrackets: true,
|
150
|
+
mode: "text/x-scss"
|
151
|
+
});
|
152
|
+
</script>
|
153
|
+
|
154
|
+
<p>The SCSS mode is a sub-mode of the <a href="index.html">CSS mode</a> (defined in <code>css.js</code>).</p>
|
155
|
+
|
156
|
+
<p><strong>Parsing/Highlighting Tests:</strong> <a href="../../test/index.html#scss_*">normal</a>, <a href="../../test/index.html#verbose,scss_*">verbose</a>.</p>
|
157
|
+
|
158
|
+
</article>
|
@@ -0,0 +1,110 @@
|
|
1
|
+
// CodeMirror, copyright (c) by Marijn Haverbeke and others
|
2
|
+
// Distributed under an MIT license: https://codemirror.net/LICENSE
|
3
|
+
|
4
|
+
(function() {
|
5
|
+
var mode = CodeMirror.getMode({indentUnit: 2}, "text/x-scss");
|
6
|
+
function MT(name) { test.mode(name, mode, Array.prototype.slice.call(arguments, 1), "scss"); }
|
7
|
+
|
8
|
+
MT('url_with_quotation',
|
9
|
+
"[tag foo] { [property background]:[variable&callee url]([string test.jpg]) }");
|
10
|
+
|
11
|
+
MT('url_with_double_quotes',
|
12
|
+
"[tag foo] { [property background]:[variable&callee url]([string \"test.jpg\"]) }");
|
13
|
+
|
14
|
+
MT('url_with_single_quotes',
|
15
|
+
"[tag foo] { [property background]:[variable&callee url]([string \'test.jpg\']) }");
|
16
|
+
|
17
|
+
MT('string',
|
18
|
+
"[def @import] [string \"compass/css3\"]");
|
19
|
+
|
20
|
+
MT('important_keyword',
|
21
|
+
"[tag foo] { [property background]:[variable&callee url]([string \'test.jpg\']) [keyword !important] }");
|
22
|
+
|
23
|
+
MT('variable',
|
24
|
+
"[variable-2 $blue]:[atom #333]");
|
25
|
+
|
26
|
+
MT('variable_as_attribute',
|
27
|
+
"[tag foo] { [property color]:[variable-2 $blue] }");
|
28
|
+
|
29
|
+
MT('numbers',
|
30
|
+
"[tag foo] { [property padding]:[number 10px] [number 10] [number 10em] [number 8in] }");
|
31
|
+
|
32
|
+
MT('number_percentage',
|
33
|
+
"[tag foo] { [property width]:[number 80%] }");
|
34
|
+
|
35
|
+
MT('selector',
|
36
|
+
"[builtin #hello][qualifier .world]{}");
|
37
|
+
|
38
|
+
MT('singleline_comment',
|
39
|
+
"[comment // this is a comment]");
|
40
|
+
|
41
|
+
MT('multiline_comment',
|
42
|
+
"[comment /*foobar*/]");
|
43
|
+
|
44
|
+
MT('attribute_with_hyphen',
|
45
|
+
"[tag foo] { [property font-size]:[number 10px] }");
|
46
|
+
|
47
|
+
MT('string_after_attribute',
|
48
|
+
"[tag foo] { [property content]:[string \"::\"] }");
|
49
|
+
|
50
|
+
MT('directives',
|
51
|
+
"[def @include] [qualifier .mixin]");
|
52
|
+
|
53
|
+
MT('basic_structure',
|
54
|
+
"[tag p] { [property background]:[keyword red]; }");
|
55
|
+
|
56
|
+
MT('nested_structure',
|
57
|
+
"[tag p] { [tag a] { [property color]:[keyword red]; } }");
|
58
|
+
|
59
|
+
MT('mixin',
|
60
|
+
"[def @mixin] [tag table-base] {}");
|
61
|
+
|
62
|
+
MT('number_without_semicolon',
|
63
|
+
"[tag p] {[property width]:[number 12]}",
|
64
|
+
"[tag a] {[property color]:[keyword red];}");
|
65
|
+
|
66
|
+
MT('atom_in_nested_block',
|
67
|
+
"[tag p] { [tag a] { [property color]:[atom #000]; } }");
|
68
|
+
|
69
|
+
MT('interpolation_in_property',
|
70
|
+
"[tag foo] { #{[variable-2 $hello]}:[number 2]; }");
|
71
|
+
|
72
|
+
MT('interpolation_in_selector',
|
73
|
+
"[tag foo]#{[variable-2 $hello]} { [property color]:[atom #000]; }");
|
74
|
+
|
75
|
+
MT('interpolation_error',
|
76
|
+
"[tag foo]#{[variable foo]} { [property color]:[atom #000]; }");
|
77
|
+
|
78
|
+
MT("divide_operator",
|
79
|
+
"[tag foo] { [property width]:[number 4] [operator /] [number 2] }");
|
80
|
+
|
81
|
+
MT('nested_structure_with_id_selector',
|
82
|
+
"[tag p] { [builtin #hello] { [property color]:[keyword red]; } }");
|
83
|
+
|
84
|
+
MT('indent_mixin',
|
85
|
+
"[def @mixin] [tag container] (",
|
86
|
+
" [variable-2 $a]: [number 10],",
|
87
|
+
" [variable-2 $b]: [number 10])",
|
88
|
+
"{}");
|
89
|
+
|
90
|
+
MT('indent_nested',
|
91
|
+
"[tag foo] {",
|
92
|
+
" [tag bar] {",
|
93
|
+
" }",
|
94
|
+
"}");
|
95
|
+
|
96
|
+
MT('indent_parentheses',
|
97
|
+
"[tag foo] {",
|
98
|
+
" [property color]: [variable&callee darken]([variable-2 $blue],",
|
99
|
+
" [number 9%]);",
|
100
|
+
"}");
|
101
|
+
|
102
|
+
MT('indent_vardef',
|
103
|
+
"[variable-2 $name]:",
|
104
|
+
" [string 'val'];",
|
105
|
+
"[tag tag] {",
|
106
|
+
" [tag inner] {",
|
107
|
+
" [property margin]: [number 3px];",
|
108
|
+
" }",
|
109
|
+
"}");
|
110
|
+
})();
|