diff options
Diffstat (limited to 'imports/codemirror/mode/less')
-rw-r--r-- | imports/codemirror/mode/less/index.html | 39 | ||||
-rw-r--r-- | imports/codemirror/mode/less/less.js | 143 |
2 files changed, 113 insertions, 69 deletions
diff --git a/imports/codemirror/mode/less/index.html b/imports/codemirror/mode/less/index.html index bd3ef198..f7705205 100644 --- a/imports/codemirror/mode/less/index.html +++ b/imports/codemirror/mode/less/index.html | |||
@@ -7,23 +7,36 @@ | |||
7 | <script src="less.js"></script> | 7 | <script src="less.js"></script> |
8 | <style>.CodeMirror {background: #f8f8f8; border: 1px solid #ddd;}</style> | 8 | <style>.CodeMirror {background: #f8f8f8; border: 1px solid #ddd;}</style> |
9 | <link rel="stylesheet" href="../../doc/docs.css"> | 9 | <link rel="stylesheet" href="../../doc/docs.css"> |
10 | <link rel="stylesheet" href="../../theme/lesser-dark.css"> | ||
10 | <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> | 11 | <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> |
11 | </head> | 12 | </head> |
12 | <body> | 13 | <body> |
13 | <h1>CodeMirror: LESS mode</h1> | 14 | <h1>CodeMirror: LESS mode</h1> |
14 | <form><textarea id="code" name="code"> | 15 | <form><textarea id="code" name="code">/* Some LESS code */ |
15 | /* Some LESS code */ | ||
16 | 16 | ||
17 | video { | 17 | @test_a: #eeeQQQ;//this is not a valid hex value and thus parsed as an element id |
18 | background-image:url('paper.gif'); | 18 | @test_b: #eeeFFF//this is a valid hex value but the declaration doesn't end with a semicolon and thus parsed as an element id |
19 | |||
20 | #eee aaa .box | ||
21 | { | ||
22 | #test bbb { | ||
23 | width: 500px; | ||
24 | height: 250px; | ||
25 | background-image: url(sheep.png), url(betweengrassandsky.png); | ||
26 | background-position: center bottom, left top; | ||
27 | background-repeat: no-repeat; | ||
28 | } | ||
19 | } | 29 | } |
20 | 30 | ||
21 | .pre_class { | 31 | @base: #f938ab; |
22 | width: 500px; | 32 | |
23 | height: 250px; | 33 | .box-shadow(@style, @c) when (iscolor(@c)) { |
24 | background-image: url(sheep.png), url(betweengrassandsky.png); | 34 | box-shadow: @style @c; |
25 | background-position: center bottom, left top; | 35 | -webkit-box-shadow: @style @c; |
26 | background-repeat: no-repeat; | 36 | -moz-box-shadow: @style @c; |
37 | } | ||
38 | .box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) { | ||
39 | .box-shadow(@style, rgba(0, 0, 0, @alpha)); | ||
27 | } | 40 | } |
28 | 41 | ||
29 | @color: #4D926F; | 42 | @color: #4D926F; |
@@ -171,7 +184,7 @@ blockquote { | |||
171 | body > footer { | 184 | body > footer { |
172 | text-align: left; | 185 | text-align: left; |
173 | margin-left: 10px; | 186 | margin-left: 10px; |
174 | font-style: italic; | 187 | font-style: italic; |
175 | font-size: 18px; | 188 | font-size: 18px; |
176 | color: #888; | 189 | color: #888; |
177 | } | 190 | } |
@@ -580,7 +593,9 @@ td { | |||
580 | } | 593 | } |
581 | </textarea></form> | 594 | </textarea></form> |
582 | <script> | 595 | <script> |
583 | var editor = CodeMirror.fromTextArea(document.getElementById("code"), {}); | 596 | var editor = CodeMirror.fromTextArea(document.getElementById("code"), { |
597 | theme: "lesser-dark" | ||
598 | }); | ||
584 | </script> | 599 | </script> |
585 | 600 | ||
586 | <p><strong>MIME types defined:</strong> <code>text/less</code>.</p> | 601 | <p><strong>MIME types defined:</strong> <code>text/less</code>.</p> |
diff --git a/imports/codemirror/mode/less/less.js b/imports/codemirror/mode/less/less.js index dc584f02..1c20bd81 100644 --- a/imports/codemirror/mode/less/less.js +++ b/imports/codemirror/mode/less/less.js | |||
@@ -1,21 +1,26 @@ | |||
1 | CodeMirror.defineMode("less", function(config) { | 1 | /* |
2 | LESS mode - http://www.lesscss.org/ | ||
3 | Ported to CodeMirror by Peter Kroon | ||
4 | */ | ||
5 | |||
6 | CodeMirror.defineMode("css", function(config) { | ||
2 | var indentUnit = config.indentUnit, type; | 7 | var indentUnit = config.indentUnit, type; |
3 | function ret(style, tp) {type = tp; return style;} | 8 | function ret(style, tp) {type = tp; return style;} |
4 | //html5 tags | 9 | //html5 tags |
5 | var tags = ["a","abbr","acronym","address","applet","area","article","aside","audio","b","base","basefont","bdi","bdo","big","blockquote","body","br","button","canvas","caption","cite","code","col","colgroup","command","datalist","dd","del","details","dfn","dir","div","dl","dt","em","embed","fieldset","figcaption","figure","font","footer","form","frame","frameset","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","iframe","img","input","ins","keygen","kbd","label","legend","li","link","map","mark","menu","meta","meter","nav","noframes","noscript","object","ol","optgroup","option","output","p","param","pre","progress","q","rp","rt","ruby","s","samp","script","section","select","small","source","span","strike","strong","style","sub","summary","sup","table","tbody","td","textarea","tfoot","th","thead","time","title","tr","track","tt","u","ul","var","video","wbr"]; | 10 | var tags = ["a","abbr","acronym","address","applet","area","article","aside","audio","b","base","basefont","bdi","bdo","big","blockquote","body","br","button","canvas","caption","cite","code","col","colgroup","command","datalist","dd","del","details","dfn","dir","div","dl","dt","em","embed","fieldset","figcaption","figure","font","footer","form","frame","frameset","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","iframe","img","input","ins","keygen","kbd","label","legend","li","link","map","mark","menu","meta","meter","nav","noframes","noscript","object","ol","optgroup","option","output","p","param","pre","progress","q","rp","rt","ruby","s","samp","script","section","select","small","source","span","strike","strong","style","sub","summary","sup","table","tbody","td","textarea","tfoot","th","thead","time","title","tr","track","tt","u","ul","var","video","wbr"]; |
6 | 11 | ||
7 | function inTagsArray(val){ | 12 | function inTagsArray(val){ |
8 | for(var i=0; i<tags.length; i++){ | 13 | for(var i=0; i<tags.length; i++){ |
9 | if(val === tags[i]){ | 14 | if(val === tags[i]){ |
10 | return true; | 15 | return true; |
11 | } | 16 | } |
12 | } | 17 | } |
13 | } | 18 | } |
14 | 19 | ||
15 | function tokenBase(stream, state) { | 20 | function tokenBase(stream, state) { |
16 | var ch = stream.next(); | 21 | var ch = stream.next(); |
17 | 22 | ||
18 | if (ch == "@") {stream.eatWhile(/[\w\-]/); return ret("meta", stream.current());} | 23 | if (ch == "@") {stream.eatWhile(/[\w\-]/); return ret("meta", stream.current());} |
19 | else if (ch == "/" && stream.eat("*")) { | 24 | else if (ch == "/" && stream.eat("*")) { |
20 | state.tokenize = tokenCComment; | 25 | state.tokenize = tokenCComment; |
21 | return tokenCComment(stream, state); | 26 | return tokenCComment(stream, state); |
@@ -30,15 +35,15 @@ CodeMirror.defineMode("less", function(config) { | |||
30 | state.tokenize = tokenString(ch); | 35 | state.tokenize = tokenString(ch); |
31 | return state.tokenize(stream, state); | 36 | return state.tokenize(stream, state); |
32 | } | 37 | } |
33 | else if (ch == "/") { // lesscss e.g.: .png will not be parsed as a class | 38 | else if (ch == "/") { // lesscss e.g.: .png will not be parsed as a class |
34 | if(stream.eat("/")){ | 39 | if(stream.eat("/")){ |
35 | state.tokenize = tokenSComment | 40 | state.tokenize = tokenSComment |
36 | return tokenSComment(stream, state); | 41 | return tokenSComment(stream, state); |
37 | }else{ | 42 | }else{ |
38 | stream.eatWhile(/[\a-zA-Z0-9\-_.]/); | 43 | stream.eatWhile(/[\a-zA-Z0-9\-_.\s]/); |
39 | if(stream.peek() == ")" || stream.peek() == "/")return ret("string", "string");//let url(/images/logo.png) without quotes return as string | 44 | if(/\/|\)/.test(stream.peek() || stream.eol() || (stream.eatSpace() && stream.peek() == ")")))return ret("string", "string");//let url(/images/logo.png) without quotes return as string |
40 | return ret("number", "unit"); | 45 | return ret("number", "unit"); |
41 | } | 46 | } |
42 | } | 47 | } |
43 | else if (ch == "!") { | 48 | else if (ch == "!") { |
44 | stream.match(/^\s*\w*/); | 49 | stream.match(/^\s*\w*/); |
@@ -48,66 +53,86 @@ CodeMirror.defineMode("less", function(config) { | |||
48 | stream.eatWhile(/[\w.%]/); | 53 | stream.eatWhile(/[\w.%]/); |
49 | return ret("number", "unit"); | 54 | return ret("number", "unit"); |
50 | } | 55 | } |
51 | else if (/[,+>*\/]/.test(ch)) {//removed . dot character original was [,.+>*\/] | 56 | else if (/[,+<>*\/]/.test(ch)) {//removed . dot character original was [,.+>*\/] |
52 | return ret(null, "select-op"); | 57 | return ret(null, "select-op"); |
53 | } | 58 | } |
54 | else if (/[;{}:\[\]()]/.test(ch)) { //added () char for lesscss original was [;{}:\[\]] | 59 | else if (/[;{}:\[\]()]/.test(ch)) { //added () char for lesscss original was [;{}:\[\]] |
55 | if(ch == ":"){ | 60 | if(ch == ":"){ |
56 | stream.eatWhile(/[active|hover|link|visited]/); | 61 | stream.eatWhile(/[active|hover|link|visited]/); |
57 | if( stream.current().match(/active|hover|link|visited/)){ | 62 | if( stream.current().match(/active|hover|link|visited/)){ |
58 | return ret("tag", "tag"); | 63 | return ret("tag", "tag"); |
59 | }else{ | 64 | }else{ |
60 | return ret(null, ch); | 65 | return ret(null, ch); |
61 | } | 66 | } |
62 | }else{ | 67 | }else{ |
63 | return ret(null, ch); | 68 | return ret(null, ch); |
64 | } | 69 | } |
65 | } | 70 | } |
66 | else if (ch == ".") { // lesscss | 71 | else if (ch == ".") { // lesscss |
67 | stream.eatWhile(/[\a-zA-Z0-9\-_]/); | 72 | stream.eatWhile(/[\a-zA-Z0-9\-_]/); |
68 | return ret("tag", "tag"); | 73 | return ret("tag", "tag"); |
69 | } | 74 | } |
70 | else if (ch == "#") { // lesscss | 75 | else if (ch == "#") { // lesscss |
71 | stream.match(/([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})/); | 76 | //we don't eat white-space, we want the hex color and or id only |
72 | if(stream.current().length >1){ | 77 | stream.eatWhile(/[A-Za-z0-9]/); |
73 | if(stream.current().match(/([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})/) != null){ | 78 | //check if there is a proper hex color length e.g. #eee || #eeeEEE |
74 | return ret("number", "unit"); | 79 | if(stream.current().length ===4 || stream.current().length ===7){ |
75 | }else{ | 80 | if(stream.current().match(/[A-Fa-f0-9]{6}|[A-Fa-f0-9]{3}/,false) != null){//is there a valid hex color value present in the current stream |
81 | //when not a valid hex value, parse as id | ||
82 | if(stream.current().substring(1) != stream.current().match(/[A-Fa-f0-9]{6}|[A-Fa-f0-9]{3}/,false))return ret("atom", "tag"); | ||
83 | //eat white-space | ||
84 | stream.eatSpace(); | ||
85 | //when hex value declaration doesn't end with [;,] but is does with a slash/cc comment treat it as an id, just like the other hex values that don't end with[;,] | ||
86 | if( /[\/<>.(){!$%^&*_\-\\?=+\|#'~`]/.test(stream.peek()) )return ret("atom", "tag"); | ||
87 | //#time { color: #aaa } | ||
88 | else if(stream.peek() == "}" )return ret("number", "unit"); | ||
89 | //we have a valid hex color value, parse as id whenever an element/class is defined after the hex(id) value e.g. #eee aaa || #eee .aaa | ||
90 | else if( /[a-zA-Z\\]/.test(stream.peek()) )return ret("atom", "tag"); | ||
91 | //when a hex value is on the end of a line, parse as id | ||
92 | else if(stream.eol())return ret("atom", "tag"); | ||
93 | //default | ||
94 | else return ret("number", "unit"); | ||
95 | }else{//when not a valid hexvalue in the current stream e.g. #footer | ||
96 | stream.eatWhile(/[\w\\\-]/); | ||
97 | return ret("atom", "tag"); | ||
98 | } | ||
99 | }else{ | ||
100 | stream.eatWhile(/[\w\\\-]/); | ||
101 | return ret("atom", "tag"); | ||
102 | } | ||
103 | } | ||
104 | else if (ch == "&") { | ||
76 | stream.eatWhile(/[\w\-]/); | 105 | stream.eatWhile(/[\w\-]/); |
77 | return ret("atom", "tag"); | 106 | return ret(null, ch); |
107 | } | ||
108 | else if (ch == "&") { | ||
109 | stream.eatWhile(/[\w\-]/); | ||
110 | return ret(null, ch); | ||
78 | } | 111 | } |
79 | }else{ | ||
80 | stream.eatWhile(/[\w\-]/); | ||
81 | return ret("atom", "tag"); | ||
82 | } | ||