Color in MathJax

Question

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?.

Answer 1

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.