New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Colors from CSS, grey symbols #1169

Closed
kaba2 opened this Issue Apr 19, 2015 · 5 comments

Comments

Projects
None yet
2 participants
@kaba2
Copy link

kaba2 commented Apr 19, 2015

I am trying to change the color of the equations to red using CSS. However, I get this:

oddcolors

Some symbols are red, and the others are grey. If I don't change the color at all, then the red symbols above are black, and the others are grey. What causes the grey symbols?

My html reads:

<p>The solution to the quadratic equation is <script class="ascii-math" type="math/asciimath">x = (-b +- sqrt(b^2 - 4ac)) / (2a)</script>.
The solution to the quadratic equation is <script class="latex-math" type="math/tex">x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}</script>.</p>

My css reads:

.MathJax
 {
     color: red !important;
     font-size: 4em !important;
 }

Also, if i use the selector .ascii-math instead, then neither font-size or color is affected. Any ideas?

The image above is from Chrome. Firefox gives the same result. The MathJax is loaded from the CDN. Here is my configuration script (remark_files/mathjax-config.js):

MathJax.Hub.Config({
    asciimath2jax: 
    {
        // Disable delimiter-based detection.
        delimiters: [],
        // Disable MathJax on all class-names...
        ignoreClass: '.*',
        // ... with no exceptions.
        processClass: ''
    },
    tex2jax: 
    {
        // Disable delimiter-based detection.
        inlineMath: [],
        displayMath: [],
        // Disable MathJax on all class-names...
        ignoreClass: '.*',
        // ... with no exceptions.
        processClass: ''
    }
});

// This is needed because we forward the MathJax configuration 
// in each file to this configuration file.
MathJax.Hub.Configured();

These are in my html-head:

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_HTMLorMML&delayStartupUntilConfig"></script>
<script type="text/javascript" src="remark_files/mathjax-config.js"></script>
@dpvc

This comment has been minimized.

Copy link
Member

dpvc commented Apr 19, 2015

I cannot reproduce the result. Your examples work properly for me in Chrome and Firefox.

I suspect that there is additional CSS on the page that is interfering. For example, if you have CSS for .mi and .mo that sets the color to black, then that could account for the problem.

Without an actual example page that illustrates the problem, it is difficult to investigate the issue. Can you provide an example on jsbin or one of the other code sharing platforms?

@kaba2

This comment has been minimized.

Copy link

kaba2 commented Apr 19, 2015

Right. I had a .css file from the Python Pygments library, where the css wasn't localized very well. Fixed that, and now the equations get colored correctly! Thanks for pointing to the right direction. I still have the second problem that if I replace the .MathJax class specifier with the .ascii-math specifier, then the colors and size are not affected. Any ideas on that?

@dpvc

This comment has been minimized.

Copy link
Member

dpvc commented Apr 19, 2015

The .ascii-math class is on the <script> element for the math, but the actual HTML that is generated for the math is not within the <script>, so the CSS doesn't apply to it. If you want to apply a class to the math itself, you could use \class{...}{...} in TeX, but there is no mechanism in AsciiMath to accomplish the same thing. Instead, you would have to use something like

<span class="ascii-math"><script type="math/asciimath">x = (-b +- sqrt(b^2 - 4ac)) / (2a)</script></span>

to get the output inside the container with class ascii-math.

@kaba2

This comment has been minimized.

Copy link

kaba2 commented Apr 19, 2015

Thank you dpvc. This resolved fast.

@dpvc

This comment has been minimized.

Copy link
Member

dpvc commented Apr 19, 2015

No problem.. Glad you worked it out.

@dpvc dpvc closed this Apr 19, 2015

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment