'Setting CSS styles, color, for MathJax

Hi I am trying to add styles to my MathJax output. In particular I would like to set a global color for my equations (so that it matches the styles on the rest of my page). Currently I have the following configuration.

<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
      jax: ["input/TeX", "output/HTML-CSS"],
      tex2jax: {
        inlineMath: [ ['$', '$'] ],
        displayMath: [ ['$$', '$$']],
        processEscapes: true,
        skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
      },
      messageStyle: "none",
      "HTML-CSS": { 
          preferredFont: "TeX", 
          availableFonts: ["STIX","TeX"], 
          styles: {".MathJax" {color: "#CCCCCC";}} 
          }
    });
</script>
<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML" type="text/javascript"></script>

However if I include the styles tag in my configuration the math on my page just refuses to display at all. On the other hand if I remove it, it displays fine.

Edit: I should also note that I have tried adding the styles directly to my CSS as suggested in other questions but this resulted in the same thing, no math being displayed at all.

UPDATE: I have added the : as Davide suggests below, now my equations display but the styling information is ignored. The styling seems to be inherited from the body of the page but wrapping the math in a div with different styling doesn't seem to affect it either.

UPDATE2: I have solved my the issue of the mathjax ignoring style commands. The color for text was globally set by a line in my CSS * { colour: #292929 }. This meant that the style from MathJax was being ignored. Simply changing * to body, a, p, h1, h2 fixed the issue.

csscolorsmathjax


Solution 1:[1]

You are missing the colon after ".MathJax". Your code should be

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  jax: ["input/TeX", "output/HTML-CSS"],
  tex2jax: {
    inlineMath: [ ['$', '$'] ],
    displayMath: [ ['$$', '$$']],
    processEscapes: true,
    skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
  },
  messageStyle: "none",
  "HTML-CSS": { 
      preferredFont: "TeX", 
      availableFonts: ["STIX","TeX"], 
      styles: {".MathJax": {color: "#CCCCCC"}} 
      }
});
</script>

and then it should work for you.

Solution 2:[2]

For MathJax 3.x, use:

.MJX-TEX{
    color: red !important;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Davide Cervone
Solution 2 M. Al Jumaily

Related Questions