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.