CODEWITHSUNDEEP
cssmathjax
user288645
user288645

Reputation: 329

Color in MathJax

I want to display questions on my blog in red in color and answers in blue in color. In questions and answers I am using MathJax 2 to render MathML. I am controlling the coloring of MathJax using CSS like this.

h3, h2, h4, h5
{
    text-align: left;
    font-weight: bold;
    font-family: Verdana;
}

.question
{
    text-align: left;
    color: Red;

}

.centerit
{
    color: Blue;
    text-align: center;
}

that works perfectly fine in IE, but in Firefox it always displays the MathJax in black color. Is there any workaround to resolve this issue?.

Upvotes: 16

Views: 13744

Answers (4)

jdh8
jdh8

Reputation: 3148

MathJax supports the \color macro, but it works differently from LaTeX. In LaTeX, \color works like plain TeX commands such as \bf, but MathJax takes it as a LaTeX command like \textbf.

\[ \color{red} The whole sentence is red in LaTeX,
   but only the initial T is colored in MathJax.  \]

Upvotes: 19

KongJunXuanStackOverflow
KongJunXuanStackOverflow

Reputation: 1

$$ y = \color{red}{sin}x $$

=

$$ y = \color{red}{sin}x $$

is the answer, but

$$ y = \color{red}sin x $$

=

$$ y = \color{red}sin x $$

is not the answer.

Upvotes: 0

Nikita Zdvijkov
Nikita Zdvijkov

Reputation: 71

If you want to color different parts of an equation different colors (e.g. if you wanted to color-code variables), use \textcolor command instead of \color to avoid spacing issues.

See the difference:

Using \textcolor (preferred):

<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

$$
y = \textcolor{red}{\sin} x
$$

Using \color (makes for incorrect spacing):

<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

$$
y = \color{red}{\sin} x
$$

Colorized MathJax equations for improved readability demo: trigids.com.

Upvotes: 7

Davide Cervone
Davide Cervone

Reputation: 12290

If you are testing your site locally using a file:// URL, then Firefox's same-origin policy probably is forcing MathJax to use image fonts rather than web fonts. See the MathJax FAQ entry on this, in particular the section on Firefox local @font-face. One solution is to install the MathJax fonts locally on your computer where you are doing the testing. The fonts can be obtained from the MathJax GitHub repository (click on a font and then on the "Raw" button in the upper right).

Alternatively, you can simply ignore the black color during debugging, as it will work properly once transfered to a live website.

Upvotes: 5

Related Questions