syntax highlighting for CSS embedding in HTML

src/mode/HtmlHighlightRules.js

@@ -21,6 +21,10 @@ ace.mode.HtmlHighlightRules = function() {
             token : "text",
             regex : "<(?=\s*script)",
             next : "script"
+        }, {
+            token : "text",
+            regex : "<(?=\s*style)",
+            next : "css"
         }, {
             token : "text", // opening tag
             regex : "<\\/?",
@@ -51,6 +55,24 @@ ace.mode.HtmlHighlightRules = function() {
             regex : "'.*?'"
         } ],
 
+        css : [ {
+            token : "text",
+            regex : ">",
+            next : "css-start"
+        }, {
+            token : "keyword",
+            regex : "[-_a-zA-Z0-9:]+"
+        }, {
+            token : "text",
+            regex : "\\s+"
+        }, {
+            token : "string",
+            regex : '".*?"'
+        }, {
+            token : "string",
+            regex : "'.*?'"
+        } ],
+
         tag : [ {
             token : "text",
             regex : ">",
@@ -98,6 +120,14 @@ ace.mode.HtmlHighlightRules = function() {
         regex: "<\\/(?=script)",
         next: "tag"
     });
+
+    var cssRules = new ace.mode.CssHighlightRules().getRules();
+    this._addRules(cssRules, "css-");
+    this._rules["css-start"].unshift({
+        token: "text",
+        regex: "<\\/(?=style)",
+        next: "tag"
+    });
 };