Add color support

Summary: Not true `\color`, but `\blue`, `\red`, etc.

Test Plan:
Add `\blue`, etc around stuff, see that it makes pretty colors
appear.

Reviewers: spicyj

Reviewed By: spicyj

Differential Revision: http://phabricator.benalpert.com/D44

MJLite.js

@@ -57,6 +57,8 @@ var buildGroup = function(group, prev) {
         var denom = makeSpan("mfracden", buildExpression(group.value.denom, denom));
 
         return makeSpan("mord mfrac", [numer, mid, denom]);
+    } else if (group.type === "color") {
+        return makeSpan("mord " + group.value.color, buildExpression(group.value.value));
     } else {
         console.log("Unknown type:", group.type);
     }

lexer.js

@@ -13,7 +13,12 @@ var normals = [
 ];
 
 var funcs = [
-    'cdot', 'dfrac', 'lvert', 'rvert', 'pm', 'div'
+    // Symbols
+    'cdot', 'lvert', 'rvert', 'pm', 'div',
+    // Colors
+    'blue', 'orange', 'pink', 'red', 'green', 'gray', 'purple',
+    // Other functions
+    'dfrac'
 ];
 var anyFunc = new RegExp("^\\\\(" + funcs.join("|") + ")(?![a-zA-Z])");
 

parser.jison

@@ -48,12 +48,26 @@ func
         {$$ = [{type: 'bin', value: yytext}];}
     | 'div'
         {$$ = [{type: 'bin', value: yytext}];}
-    | 'dfrac' group group
-        {$$ = [{type: 'dfrac', value: {numer: $2, denom: $3}}];}
     | 'lvert'
         {$$ = [{type: 'open', value: yytext}];}
     | 'rvert'
         {$$ = [{type: 'close', value: yytext}];}
+    | 'blue' group
+        {$$ = [{type: 'color', value: {color: 'blue', value: $2}}];}
+    | 'orange' group
+        {$$ = [{type: 'color', value: {color: 'orange', value: $2}}];}
+    | 'pink' group
+        {$$ = [{type: 'color', value: {color: 'pink', value: $2}}];}
+    | 'red' group
+        {$$ = [{type: 'color', value: {color: 'red', value: $2}}];}
+    | 'green' group
+        {$$ = [{type: 'color', value: {color: 'green', value: $2}}];}
+    | 'gray' group
+        {$$ = [{type: 'color', value: {color: 'gray', value: $2}}];}
+    | 'purple' group
+        {$$ = [{type: 'color', value: {color: 'purple', value: $2}}];}
+    | 'dfrac' group group
+        {$$ = [{type: 'dfrac', value: {numer: $2, denom: $3}}];}
     ;
 
 atom

static/style.css

@@ -109,3 +109,19 @@ input {
     display: inline-block;
     vertical-align: bottom;
 }
+
+.mord.blue { color: #6495ed; }
+.mord.orange { color: #ffa500; }
+.mord.pink { color: #ff00af; }
+.mord.red { color: #df0030; }
+.mord.green { color: #28ae7b; }
+.mord.gray { color: gray; }
+.mord.purple { color: #9d38bd; }
+
+.blue .mfracmid > span { background: #6495ed; }
+.orange .mfracmid > span { background: #ffa500; }
+.pink .mfracmid > span { background: #ff00af; }
+.red .mfracmid > span { background: #df0030; }
+.green .mfracmid > span { background: #28ae7b; }
+.gray .mfracmid > span { background: gray; }
+.purple .mfracmid > span { background: #9d38bd; }