htmlcssmathjax

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.

Solution

  • 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.