Added new exercise colors as macros

Summary:
On https://app.asana.com/0/34646644303310/33935538887378, @eater requested we add some new colors to KaTeX, which lives in the spin-off Khan/KaTeX open source project. (See screenshot for colors.) I added these colors to KaTeX so math typesetting tools in exercises have access to them.

I used "blueA", "blueB", etc. because dashes and numbers aren't supported in KaTeX/LaTeX functions.

The actual mapping of color name => hex value is in "Options", and the listing of colors available for typesetting is in "functions".

See also https://phabricator.khanacademy.org/D18158 for the related additions to utils/math.js and KAthJax.

Test Plan:
- Set up the KaTeX dev environment (instructions taken from https://github.com/Khan/KaTeX/blob/master/CONTRIBUTING.md):
```
cd KaTeX
make setup
make serve
```
- Now that the server is up and running, visit http://localhost:7936/ to try live typesetting. Enter the following LaTeX code to try the new colors:
```
\blueE{e=mc^2}
```
- Try other new colors including \redD, \mintC, \grayH, \kaBlue, etc.
- Old colors like \orange should still work.
- Run the Jasmine test suite at http://localhost:7936/test/test.html.

Reviewers: emily

Reviewed By: emily

Subscribers: nataliefitzgerald, eater, cameron, david

Differential Revision: https://phabricator.khanacademy.org/D18152
This commit is contained in:
hathix 2015-05-26 19:07:51 -07:00
parent 8691486392
commit 9869d59cad
3 changed files with 67 additions and 2 deletions

View File

@ -111,7 +111,56 @@ var colorMap = {
"katex-red": "#df0030",
"katex-green": "#28ae7b",
"katex-gray": "gray",
"katex-purple": "#9d38bd"
"katex-purple": "#9d38bd",
"katex-blueA": "#c7e9f1",
"katex-blueB": "#9cdceb",
"katex-blueC": "#58c4dd",
"katex-blueD": "#29abca",
"katex-blueE": "#1c758a",
"katex-tealA": "#acead7",
"katex-tealB": "#76ddc0",
"katex-tealC": "#5cd0b3",
"katex-tealD": "#55c1a7",
"katex-tealE": "#49a88f",
"katex-greenA": "#c9e2ae",
"katex-greenB": "#a6cf8c",
"katex-greenC": "#83c167",
"katex-greenD": "#77b05d",
"katex-greenE": "#699c52",
"katex-goldA": "#f7c797",
"katex-goldB": "#f9b775",
"katex-goldC": "#f0ac5f",
"katex-goldD": "#e1a158",
"katex-goldE": "#c78d46",
"katex-redA": "#f7a1a3",
"katex-redB": "#ff8080",
"katex-redC": "#fc6255",
"katex-redD": "#e65a4c",
"katex-redE": "#cf5044",
"katex-maroonA": "#ecabc1",
"katex-maroonB": "#ec92ab",
"katex-maroonC": "#c55f73",
"katex-maroonD": "#a24d61",
"katex-maroonE": "#94424f",
"katex-purpleA": "#caa3e8",
"katex-purpleB": "#b189c6",
"katex-purpleC": "#9a72ac",
"katex-purpleD": "#715582",
"katex-purpleE": "#644172",
"katex-mintA": "#f5f9e8",
"katex-mintB": "#edf2df",
"katex-mintC": "#e0e5cc",
"katex-grayA": "#fdfdfd",
"katex-grayB": "#f7f7f7",
"katex-grayC": "#eeeeee",
"katex-grayD": "#dddddd",
"katex-grayE": "#cccccc",
"katex-grayF": "#aaaaaa",
"katex-grayG": "#999999",
"katex-grayH": "#555555",
"katex-grayI": "#333333",
"katex-kaBlue": "#314453",
"katex-kaGreen": "#639b24"
};
/**

View File

@ -226,7 +226,18 @@ var duplicatedFunctions = [
{
funcs: [
"\\blue", "\\orange", "\\pink", "\\red",
"\\green", "\\gray", "\\purple"
"\\green", "\\gray", "\\purple",
"\\blueA", "\\blueB", "\\blueC", "\\blueD", "\\blueE",
"\\tealA", "\\tealB", "\\tealC", "\\tealD", "\\tealE",
"\\greenA", "\\greenB", "\\greenC", "\\greenD", "\\greenE",
"\\goldA", "\\goldB", "\\goldC", "\\goldD", "\\goldE",
"\\redA", "\\redB", "\\redC", "\\redD", "\\redE",
"\\maroonA", "\\maroonB", "\\maroonC", "\\maroonD", "\\maroonE",
"\\purpleA", "\\purpleB", "\\purpleC", "\\purpleD", "\\purpleE",
"\\mintA", "\\mintB", "\\mintC",
"\\grayA", "\\grayB", "\\grayC", "\\grayD", "\\grayE",
"\\grayF", "\\grayG", "\\grayH", "\\grayI",
"\\kaBlue", "\\kaGreen"
],
data: {
numArgs: 1,

View File

@ -654,6 +654,7 @@ describe("A text parser", function() {
describe("A color parser", function() {
var colorExpression = "\\blue{x}";
var newColorExpression = "\\redA{x}";
var customColorExpression = "\\color{#fA6}{x}";
var badCustomColorExpression = "\\color{bad-color}{x}";
@ -683,6 +684,10 @@ describe("A color parser", function() {
expect(badCustomColorExpression).toNotParse();
});
it("should parse new colors from the branding guide", function(){
expect(newColorExpression).toParse();
});
it("should have correct greediness", function() {
expect("\\color{red}a").toParse();
expect("\\color{red}{\\text{a}}").toParse();