14

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 big. The current include is:

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

At the bottom of my page. Renders TEX fine, but I'd like to set some CSS on it!

Ideally I'd like to pass a CSS class name to it.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Tom Gullen
  • 61,249
  • 84
  • 283
  • 456

2 Answers2

20

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.

asthasr
  • 9,125
  • 1
  • 29
  • 43
  • Thanks, but I can't work out where to set these options, I'm completely lost – Tom Gullen Apr 12 '11 at 18:26
  • 1
    I added a link to another page that covers that process. – asthasr Apr 12 '11 at 18:30
  • I've been through those web pages, that one you linked to doesn't show me how to change the font size. – Tom Gullen Apr 12 '11 at 18:33
  • It absolutely does. It says to set the scale option. It shows you how to set the scale. The last one I linked has an even simpler solution with an enclosing `
    `.
     – asthasr Apr 12 '11 at 18:35
  • Ok thanks, but that last link was added in after my last comment, sorry for misunderstanding – Tom Gullen Apr 12 '11 at 18:36
  • Yeah, sorry about that; I noticed the example under the "demos" section after I posted the link to the configuration manual. I will say that it's worth learning to use the configuration files, though; there are many options you can set. – asthasr Apr 12 '11 at 18:39
13

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;
}
Avatar
  • 14,622
  • 9
  • 119
  • 198
  • 1
    Thanks for this. Works fine on all browsers I tested except Safari on a mobile device. Is there a way to get font size changes to work in that context? **EDIT:** Answered my own question less than a minute after posting this, as I am so prone to do for some reason. Basically just add another line inside MathJax.Hub.Config: `CommonHTML: { scale: 150, linebreaks: { automatic: true } },` –  Jul 29 '16 at 02:31
  • Hi, thanks. It looks like `CommonHTML: { scale: 150, linebreaks: { automatic: true } },` can scale the math, but strange `"HTML-CSS": { scale: 200, ...` does not works on my Markdown editor(ghostwriter) – ollydbg23 Apr 30 '18 at 02:05
  • Doesn't work for me due to inline style: ` – coder.in.me Aug 21 '19 at 04:17