Added HTML syntax highlighting in the editor

This commit is contained in:
benweet 2013-11-18 19:56:11 +00:00
parent 0a63b80f8f
commit 909b0dcde1
2 changed files with 69 additions and 51 deletions

View File

@ -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 = {
"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" : [{
this.$rules["start"].unshift({
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();
};

View File

@ -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;
}