MathJax CSS classes etc

A frequent topic: HTML output and CSS clashing.

MathJax vs pygments

MathJax color and Pygments code highlighting https://groups.google.com/d/msg/mathjax-users/LgwIpABeP1A/7QhwZ8jGRm8J

it seems, that the problem is an incompatibility with pygments (http://pygments.org/) a python syntax highlighter.

It seems, that pygments and mathjax use the same (css-)classnames for styling issues. Names like ".mi" and ".mo" for example.

eg: the first "-" in my screenshot viewed as html: −

And in my pygments.css file, there is a class defined like this: .mo { color: #666666 } /* Literal.Number.Oct */

Do you have any tipps for me, how i can avoid something like this?

regards,

Simon

---

You could perhaps use

.MathJax .mo { color: inherit }

to override the color for the MathJax output.

Davide

---

Thanks for your Tipp!

I've used a little bit different way. I changed every definition of the pygments-css file into: .highlight .mo { color: #666666 } /* Literal.Number.Oct */ Since every pygments element is someway a child of a highlight block.

Works great for me.

regards,

Simon

underline mathml code in hyper link tags

From https://groups.google.com/d/msg/mathjax-users/hs0ShgNvTqk/iMDWBoouXcEJ

If you are using MathJax's HTML-CSS output, then try

    .MathJax a:hover, .MathJax a:active {

        color: red;
        text-decoration: underline ! important;
    }

instead. I think that should work for you.

---

OK, I thought you were using href's within the math itself, while you are putting the link outside the math. In that case, use

a:hover .MathJax *, a:active .MathJax * {
  color: red;
  text-decoration: underline ! important;
} 

I think that will do it for you (for HTML-CSS output).

---

MathJax creates its own stylesheets dynamically when it runs. The data for the styles are configurable, and you can find the defaults in the various output jax code. For example, the styles for ".MathJax" are defined in the MathJax/unpacked/jax/output/HTML-CSS/jax.js file starting at line 196.