CODEWITHSUNDEEP
htmlcssmathjax
Tom Gullen
Tom Gullen

Reputation: 61739

Styling MathJax with CSS

I'm so confused about this. I've searched for tutorials, but can't find any that make much sense to me.

How do I set a CSS class for MathJax output? I just want to make the font larger. The current include at the bottom of my HTML is:

<script type="text/javascript"
  src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

This renders the TeX fine, but I'd like to set some CSS on it. Ideally, I'd like to pass a CSS class name to it.

Upvotes: 14

Views: 14566

Answers (3)

Jeremy Caney
Jeremy Caney

Reputation: 7591

As of MathJax 3 and above, the MathJax.Hub.Config() method suggested by older answers is no longer supported. Instead, you should use the window.MathJax object to set the configuration properties.

For instance, to scale the font size by 50% in CommonHTML output, you would use:

<script>
  MathJax = {
    chtml: {
      scale: 1.5
    }
  };
</script>

For more information, see the following documentation from MathJax.org:

Upvotes: 1

Avatar
Avatar

Reputation: 15166

Update:

As I have learned now, do not use CSS to style TeX in mathjax, it could lead to display problems. See here: https://github.com/mathjax/MathJax/issues/925

Solution is to use Javascript with the Config block: 

<script type="text/x-mathjax-config"> 
    MathJax.Hub.Config({ 
        "HTML-CSS": { scale: 200, linebreaks: { automatic: true } }, 
        SVG: { linebreaks: { automatic:true } }, 
        displayAlign: "left" });
</script>

Obsolete:

I am loading MathJax dynamically with JQuery's getScript(), only in case there are $$ on the page. In this case the solution above does not work.

The workaround is to set the CSS after the loading took place: 

$(".MathJax").css("font-size","150%");

Instead of the font size in % you can also use px or em.

If this does not work, use !important for your CSS styles. For instance: 

.MathJax, .MathJax_Display  {
    text-align: left !important;
    font-size: 130%  !important;
}

Upvotes: 13

asthasr
asthasr

Reputation: 9397

Have you tried setting the scale option in your output processor? See the manual. You can set the configuration options either in a file or inline; this page covers the process.

Basically, you include a short snippet of JavaScript in your page, or in a file you include. Example:

<script type="text/javascript">    
  MathJax.Hub.Config({    
    extensions: ["tex2jax.js"],    
    "HTML-CSS": { scale: 100}    
  });    
</script>

Also, you can simply surround the thing in a div with a CSS class applied. View the source on this page.

<div style="font-size: 500%;">    
\[

  g\frac{d^2u}{dx^2} + L\sin u = 0

\]    
</div>

The equation will simply inherit the font size.

Upvotes: 20

Related Questions