Added HTML syntax highlighting in the editor

public/res/libs/ace_mode_highlight_rules.js

@@ -33,56 +33,14 @@ define(function(require, exports, module) {
 
 var oop = require("ace/lib/oop");
 var TextHighlightRules = require("ace/mode/text_highlight_rules").TextHighlightRules;
-var LatexHighlightRules = require("ace/mode/latex_highlight_rules").LatexHighlightRules;
+var HtmlHighlightRules = require("ace/mode/html_highlight_rules").HtmlHighlightRules;
 
 var MarkdownHighlightRules = function() {
+    HtmlHighlightRules.call(this);
 
     // regexp must not have capturing parentheses
     // regexps are ordered -> the first match is used
-
+    this.$rules["start"].unshift({
-    this.$rules = {
-        "basic" : [{
-            token : "constant.language.escape",
-            regex : /\\[\\`*_{}\[\]()#+\-.!]/
-        }, { // code span `
-            token : "code",
-            regex : "(`+)(.*?[^`])(\\1)"
-        }, { // reference
-            token : ["text", "reference", "text", "markup.underline", "description", "text"],
-            regex : "^([ ]{0,3}\\[)([^\\]]+)(\\]:\\s*)([^ ]+)(\\s*(?:[\"][^\"]+[\"])?(\\s*))$"
-        }, { // link by reference
-            token : ["text", "description", "text", "markup.underline", "text"],
-            regex : "(\\[)((?:[[^\\]]*\\]|[^\\[\\]])*)(\\][ ]?(?:\\n[ ]*)?\\[)(.*?)(\\])"
-        }, { // link by url
-            token : ["text", "description", "text", "markup.underline", "string", "text"],
-            regex : "(\\[)"+
-                    "(\\[[^\\]]*\\]|[^\\[\\]]*)"+
-                    "(\\]\\([ \\t]*)"+
-                    "(<?(?:(?:[^\\(]*?\\([^\\)]*?\\)\\S*?)|(?:.*?))>?)"+
-                    "((?:[ \t]*\"(?:.*?)\"[ \\t]*)?)"+
-                    "(\\))"
-        }, { // strong ** __
-            token : "strong",
-            regex : "([*]{2}|[_]{2}(?=\\S))(.*?\\S[*_]*)(\\1)"
-        }, { // emphasis * _
-            token : "emphasis",
-            regex : "([*]|[_](?=\\S))(.*?\\S[*_]*)(\\1)"
-        }, { //
-            token : ["text", "url", "text"],
-            regex : "(<)("+
-                      "(?:https?|ftp|dict):[^'\">\\s]+"+
-                      "|"+
-                      "(?:mailto:)?[-.\\w]+\\@[-a-z0-9]+(?:\\.[-a-z0-9]+)*\\.[a-z]+"+
-                    ")(>)"
-        }],
-
-        // code block
-        "allowBlock": [
-            {token : ["text", "code_block"], regex : "^( {4}|\\t)(.+)", next : "allowBlock"},
-            {token : "empty", regex : "", next : "start"}
-        ],
-
-        "start" : [{
         token : "empty_line",
         regex : '^$',
         next: "allowBlock"
@@ -128,8 +86,50 @@ var MarkdownHighlightRules = function() {
         next  : "latexblock"
     }, {
         include : "basic"
+    });
+
+    this.addRules({
+        "basic" : [{
+            token : "constant.language.escape",
+            regex : /\\[\\`*_{}\[\]()#+\-.!]/
+        }, { // code span `
+            token : "code",
+            regex : "(`+)(.*?[^`])(\\1)"
+        }, { // reference
+            token : ["text", "reference", "text", "markup.underline", "description", "text"],
+            regex : "^([ ]{0,3}\\[)([^\\]]+)(\\]:\\s*)([^ ]+)(\\s*(?:[\"][^\"]+[\"])?(\\s*))$"
+        }, { // link by reference
+            token : ["text", "description", "text", "markup.underline", "text"],
+            regex : "(\\[)((?:[[^\\]]*\\]|[^\\[\\]])*)(\\][ ]?(?:\\n[ ]*)?\\[)(.*?)(\\])"
+        }, { // link by url
+            token : ["text", "description", "text", "markup.underline", "string", "text"],
+            regex : "(\\[)"+
+                    "(\\[[^\\]]*\\]|[^\\[\\]]*)"+
+                    "(\\]\\([ \\t]*)"+
+                    "(<?(?:(?:[^\\(]*?\\([^\\)]*?\\)\\S*?)|(?:.*?))>?)"+
+                    "((?:[ \t]*\"(?:.*?)\"[ \\t]*)?)"+
+                    "(\\))"
+        }, { // strong ** __
+            token : "strong",
+            regex : "([*]{2}|[_]{2}(?=\\S))(.*?\\S[*_]*)(\\1)"
+        }, { // emphasis * _
+            token : "emphasis",
+            regex : "([*]|[_](?=\\S))(.*?\\S[*_]*)(\\1)"
+        }, { //
+            token : ["text", "url", "text"],
+            regex : "(<)("+
+                      "(?:https?|ftp|dict):[^'\">\\s]+"+
+                      "|"+
+                      "(?:mailto:)?[-.\\w]+\\@[-a-z0-9]+(?:\\.[-a-z0-9]+)*\\.[a-z]+"+
+                    ")(>)"
         }],
 
+        // code block
+        "allowBlock": [
+            {token : ["text", "code_block"], regex : "^( {4}|\\t)(.+)", next : "allowBlock"},
+            {token : "empty", regex : "", next : "start"}
+        ],
+
         "header" : [{
             regex: "$",
             next : "start"
@@ -211,7 +211,7 @@ var MarkdownHighlightRules = function() {
             token : "comment",
             regex : "%.*$"
         }]
-    };
+    });
 
     this.normalizeRules();
 };

public/res/styles/main.less

@@ -1003,12 +1003,30 @@ ul,ol {
 	    color: @primary-color-lightest;
 	}
 	
+	.ace_meta.ace_tag {
+		color: @primary-color;
+		font-style: italic;
+		font-weight: bold;
+		background-color: @code-bg;
+	}
+	
+	.ace_keyword.ace_operator {
+	    color: @primary-color-light;
+		background-color: transparent;
+	}
+	
 	.ace_keyword {
 		color: @primary-color;
 		background-color: @code-bg;
 		font-weight: bold;
 	}
 	
+	.ace_string {
+		color: @primary-color;
+		font-style: italic;
+		background-color: @code-bg;
+	}
+	
 	.ace_strong {
 		font-weight: bold;
 	}