Search code examples
cssjekyllmathjax

MathJax equations are colored in jekyll

My MathJax equations on my Jekyll blog are green. I think the CSS in the Alembic theme is overriding the ability of MathJax equations to inherit the same color as the text in the blog post.

I have tried the solution here using the color red to test it:

Namely, adding to _layout/post.html:

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  "HTML-CSS": { 
      styles: {".MathJax": {color: "#FF0000 ! important"}} 
      }
});
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML_HTMLorMML" type="text/javascript"></script>

This doesn't work. And, oddly, when I type $$n=7$ the n= part is green and the 7 is red. Very odd.

My theme, a fork of the Alembic theme, is here. I am wondering how I can modify a CSS file to enable MathJax to inherit the font color in my blog post.

Here is a live example.

Solution

  • This is due to clashing class names. From a quick look, the problems come down to .mi and .mo which the the syntax highlighter sets (these lines) but MathJax also uses in its HTML-CSS output.

    You can work around this by, e.g., removing the styles from _syntax.scss highlighter (or scoping them to a wrapper class if available).

    From the MathJax end, you could workaround this by adding

    .MathJax .mi, .MathJax .mo {
    color: inherit;
}

    to your CSS.

    A simpler alternative might be to use another MathJax output, e.g., the CommonHTML output.