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.

Tooltips

From https://groups.google.com/d/msg/mathjax-users/yK_2XNTSQc0/xdo3F24M8N4J

The problem is with your CSS, which is interfering with MathJax's positioning of the mathematics. If you change your declarations from

.tooltip span { ... }

and

.tooltip:hover span { ... }

to

.tooltip > span { ... }

and

.tooltip:hover > span { ... }

that should clear things up. You can then use MathJax as usual within the <span> tags in your tooltips. The original form would affect all spans inside your tooltip (including all the ones generated by MathJax), and that messed up the spacing of the mathematics (it was moved 2em down and 1em over, which put it outside its clipping box, so it disappeared). The greater-than sign makes your changes only affect the first span inside the tooltip, so that the changes don't affect the MathJax output.

Davide