From 9b7e10e4f753786f125254a79d7cd88acc08afd4 Mon Sep 17 00:00:00 2001
From: Ron Kok <ronkok@comcast.net>
Date: Sat, 1 Sep 2018 10:27:17 -0700
Subject: [PATCH] Allow 6-digit color spec w/o # (#1690)

* Allow 6-digit color spec w/o #

* Improve RegEx pattern

* Pick up comment

* fix lint
---
 docs/supported.md   |  2 +-
 src/Parser.js       | 11 +++++++++--
 test/errors-spec.js |  8 ++++----
 test/katex-spec.js  |  4 ++++
 4 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/docs/supported.md b/docs/supported.md
index e3361d19..5b4fd607 100644
--- a/docs/supported.md
+++ b/docs/supported.md
@@ -508,7 +508,7 @@ $\textcolor{#228B22}{F=ma}$ `\textcolor{#228B22}{F=ma}`<br>
 $\colorbox{aqua}{A}$ `\colorbox{aqua}{A}`<br>
 $\fcolorbox{red}{aqua}{A}$ `\fcolorbox{red}{aqua}{A}`
 
-For color definition, KaTeX color functions will accept the standard HTML [predefined color names](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#Color_keywords). They will also accept an RGB argument in CSS hexa­decimal style.
+For color definition, KaTeX color functions will accept the standard HTML [predefined color names](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#Color_keywords). They will also accept an RGB argument in CSS hexa­decimal style. The "#" is optional before a six-digit specification.
 
 **Font**
 
diff --git a/src/Parser.js b/src/Parser.js
index 541a2b5d..9d581164 100644
--- a/src/Parser.js
+++ b/src/Parser.js
@@ -743,14 +743,21 @@ export default class Parser {
         if (!res) {
             return null;
         }
-        const match = (/^(#[a-f0-9]{3}|#[a-f0-9]{6}|[a-z]+)$/i).exec(res.text);
+        const match = (/^(#[a-f0-9]{3}|#?[a-f0-9]{6}|[a-z]+)$/i).exec(res.text);
         if (!match) {
             throw new ParseError("Invalid color: '" + res.text + "'", res);
         }
+        let color = match[0];
+        if (/^[0-9a-f]{6}$/i.test(color)) {
+            // We allow a 6-digit HTML color spec without a leading "#".
+            // This follows the xcolor package's HTML color model.
+            // Predefined color names are all missed by this RegEx pattern.
+            color = "#" + color;
+        }
         return newArgument({
             type: "color-token",
             mode: this.mode,
-            color: match[0],
+            color,
         }, res);
     }
 
diff --git a/test/errors-spec.js b/test/errors-spec.js
index 2f1525c1..e41091fc 100644
--- a/test/errors-spec.js
+++ b/test/errors-spec.js
@@ -296,10 +296,10 @@ describe("Lexer:", function() {
     });
 
     describe("#_innerLexColor", function() {
-        it("reject hex notation without #", function() {
-            expect`\textcolor{1a2b3c}{foo}`.toFailWithParseError(
-                   "Invalid color: '1a2b3c'" +
-                   " at position 12: \\textcolor{1̲a̲2̲b̲3̲c̲}{foo}");
+        it("reject 3-digit hex notation without #", function() {
+            expect`\textcolor{1a2}{foo}`.toFailWithParseError(
+                   "Invalid color: '1a2'" +
+                   " at position 12: \\textcolor{1̲a̲2̲}{foo}");
         });
     });
 
diff --git a/test/katex-spec.js b/test/katex-spec.js
index ffe4117c..4b7f6be4 100644
--- a/test/katex-spec.js
+++ b/test/katex-spec.js
@@ -780,6 +780,7 @@ describe("A color parser", function() {
     const newColorExpression = r`\redA{x}`;
     const customColorExpression1 = r`\textcolor{#fA6}{x}`;
     const customColorExpression2 = r`\textcolor{#fA6fA6}{x}`;
+    const customColorExpression3 = r`\textcolor{fA6fA6}{x}`;
     const badCustomColorExpression1 = r`\textcolor{bad-color}{x}`;
     const badCustomColorExpression2 = r`\textcolor{#fA6f}{x}`;
     const badCustomColorExpression3 = r`\textcolor{#gA6}{x}`;
@@ -800,14 +801,17 @@ describe("A color parser", function() {
     it("should parse a custom color", function() {
         expect(customColorExpression1).toParse();
         expect(customColorExpression2).toParse();
+        expect(customColorExpression3).toParse();
     });
 
     it("should correctly extract the custom color", function() {
         const parse1 = getParsed(customColorExpression1)[0];
         const parse2 = getParsed(customColorExpression2)[0];
+        const parse3 = getParsed(customColorExpression3)[0];
 
         expect(parse1.color).toEqual("#fA6");
         expect(parse2.color).toEqual("#fA6fA6");
+        expect(parse3.color).toEqual("#fA6fA6");
     });
 
     it("should not parse a bad custom color", function() {