Support \colorbox and \fcolorbox (#886)

* Support \colorbox and \\fcolorbox

These are functions from the `color` package. They accept text, not math. They also have padding similar to `\fbox`.

Because of the padding, the code in `buildHTML` is intermixed with the `\fbox` code. I have not (yet) created a new file in the functions folder. This way, the reviewer gets a cleaner diff.

* Fix lint error

* colorbox screenshots

* Pick up review comments

test/__snapshots__/mathml-spec.js.snap

@@ -74,6 +74,27 @@ exports[`A MathML builder should make prime operators into <mo> nodes 1`] = `
 
 `;
 
+exports[`A MathML builder should use <menclose> for colorbox 1`] = `
+
+<math>
+  <semantics>
+    <mrow>
+      <menclose mathbackground="red">
+        <mrow>
+          <mtext>
+            b
+          </mtext>
+        </mrow>
+      </menclose>
+    </mrow>
+    <annotation encoding="application/x-tex">
+      \\colorbox{red}{b}
+    </annotation>
+  </semantics>
+</math>
+
+`;
+
 exports[`A MathML builder should use <mpadded> for raisebox 1`] = `
 
 <math>

test/katex-spec.js

@@ -2046,6 +2046,78 @@ describe("A boxed builder", function() {
     });
 });
 
+describe("A colorbox parser", function() {
+    it("should not fail, given a text argument", function() {
+        expect("\\colorbox{red}{a b}").toParse();
+        expect("\\colorbox{red}{x}^2").toParse();
+        expect("\\colorbox{red} x").toParse();
+    });
+
+    it("should fail, given a math argument", function() {
+        expect("\\colorbox{red}{\\alpha}").toNotParse();
+        expect("\\colorbox{red}{\\frac{a}{b}}").toNotParse();
+    });
+
+    it("should parse a color", function() {
+        expect("\\colorbox{red}{a b}").toParse();
+        expect("\\colorbox{#197}{a b}").toParse();
+        expect("\\colorbox{#1a9b7c}{a b}").toParse();
+    });
+
+    it("should produce enclose", function() {
+        const parse = getParsed("\\colorbox{red} x")[0];
+        expect(parse.type).toEqual("enclose");
+    });
+});
+
+describe("A colorbox builder", function() {
+    it("should not fail", function() {
+        expect("\\colorbox{red}{a b}").toBuild();
+        expect("\\colorbox{red}{a b}^2").toBuild();
+        expect("\\colorbox{red} x").toBuild();
+    });
+
+    it("should produce mords", function() {
+        expect(getBuilt("\\colorbox{red}{a b}")[0].classes).toContain("mord");
+    });
+});
+
+describe("An fcolorbox parser", function() {
+    it("should not fail, given a text argument", function() {
+        expect("\\fcolorbox{blue}{yellow}{a b}").toParse();
+        expect("\\fcolorbox{blue}{yellow}{x}^2").toParse();
+        expect("\\fcolorbox{blue}{yellow} x").toParse();
+    });
+
+    it("should fail, given a math argument", function() {
+        expect("\\fcolorbox{blue}{yellow}{\\alpha}").toNotParse();
+        expect("\\fcolorbox{blue}{yellow}{\\frac{a}{b}}").toNotParse();
+    });
+
+    it("should parse a color", function() {
+        expect("\\fcolorbox{blue}{yellow}{a b}").toParse();
+        expect("\\fcolorbox{blue}{#197}{a b}").toParse();
+        expect("\\fcolorbox{blue}{#1a9b7c}{a b}").toParse();
+    });
+
+    it("should produce enclose", function() {
+        const parse = getParsed("\\fcolorbox{blue}{yellow} x")[0];
+        expect(parse.type).toEqual("enclose");
+    });
+});
+
+describe("A fcolorbox builder", function() {
+    it("should not fail", function() {
+        expect("\\fcolorbox{blue}{yellow}{a b}").toBuild();
+        expect("\\fcolorbox{blue}{yellow}{a b}^2").toBuild();
+        expect("\\fcolorbox{blue}{yellow} x").toBuild();
+    });
+
+    it("should produce mords", function() {
+        expect(getBuilt("\\colorbox{red}{a b}")[0].classes).toContain("mord");
+    });
+});
+
 describe("A strike-through parser", function() {
     it("should not fail", function() {
         expect("\\cancel{x}").toParse();

test/mathml-spec.js

@@ -54,4 +54,8 @@ describe("A MathML builder", function() {
     it('should use <mpadded> for raisebox', () => {
         expect(getMathML("\\raisebox{0.25em}{b}")).toMatchSnapshot();
     });
+
+    it('should use <menclose> for colorbox', () => {
+        expect(getMathML("\\colorbox{red}{b}")).toMatchSnapshot();
+    });
 });

test/screenshotter/ss_data.yaml

@@ -59,6 +59,7 @@ Colors:
     nolatex: different syntax and different scope
 ColorImplicit: bl{ack\color{red}red\textcolor{green}{green}red\color{blue}blue}black
 ColorSpacing: \textcolor{red}{\displaystyle \int x} + 1
+Colorbox:  a \colorbox{teal} B \fcolorbox{blue}{red}{C} e+\colorbox{teal}x
 DashesAndQuotes: \text{``a'' b---c -- d----`e'-{-}-f}--``x''
 DeepFontSizing:
     tex: |