Tuesday, July 12, 2011

MathJax in Blogger (II)

The new awesome way to include math in a website is MathJax. Until recently, one had to install MathJax in their own server in order to include math in their webpages. That changed a few weeks ago; you can now specify in your html code that the required script be loaded from MathJax's website.

To get MathJax to work in Blogger, just go to your Blogger account, click "Design" (top right of the page), and then "Edit HTML". After the first <head> you see, paste
<script src='http://cdn.mathjax.org/mathjax/latest/MathJax.js' type='text/javascript'>    
    MathJax.Hub.Config({
        HTML: ["input/TeX","output/HTML-CSS"],
        TeX:extensions: ["AMSmath.js","AMSsymbols.js"], 
               equationNumbers: { autoNumber: "AMS" } },
        extensions: ["tex2jax.js"],
        jax: ["input/TeX","output/HTML-CSS"],
        tex2jax: { inlineMath: [ ['$','$'], ["\\(","\\)"] ],
                   displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
                   processEscapes: true },
        "HTML-CSS": { availableFonts: ["TeX"],
                      linebreaks: { automatic: true } }
    });
</script>

You're done! You can now use the usual $...$ or \(...\) for inline equations, and $$...$$ or
\[...\] for equations that are centered in their own line.

Time for an example:
\[
\cos^2\theta-\sin^2\theta=\cos 2\theta.
\] The above script loads AMSmath and AMSsymbols so that the macros defined in these popular packages are available for use in your blog.

UPDATE: Equations can now be numbered and referred to. For example, in Newtonian gravity we have
\begin{equation}\label{eq:gravt}
F=G\frac{mM}{r^2}.
\end{equation}Also,
\begin{equation}\label{eq:gravo}
F=mg,
\end{equation}and so equations (\ref{eq:gravt}) and (\ref{eq:gravo}) lead to\[
g=G\frac{M}{r^2},
\]assuming the equivalence of inertial and gravitational mass.

46 comments:

  1. Awesome post $\cos^2\theta-\sin^2\theta=\cos 2\theta$

    ReplyDelete
    Replies
    1. no funtiona en celulares es decir todas las formulas de aqui se pueden ver en computadoras pero no en celulares una pena

      Delete
  2. Great post. Anything to make font bigger

    ReplyDelete
  3. @SeerSucker The font should scale with the font you use in your blog.

    ReplyDelete
  4. Right click the equation and you can set the zoom factor and zoom trigger in the settings option.

    ReplyDelete
  5. I've tried that.Wonderful.$x^n+y^n=z^n$

    ReplyDelete
  6. I successfully used your JS in Blogger. Thanks for that.

    One thing that seems to be missing is equation numbering. Any mods to your script to enable that?

    ReplyDelete
  7. Nice! Now applied to my blog.

    FYI: I noticed that, since the numbering is applied globally then, with numbered eqns in say 2 separate blog posts, the first eqn in the older post will not be (1) but some higher number, e.g., (6), depending on how many numbered eqns precede it in the newer post.

    In LaTeX, the eqn counter can be reset as desired. Is there a similar feature in MathJax?

    ReplyDelete
  8. Thank you.Let me try
    \begin{equation}
    x^n+y^n=z^n
    \end{equation}

    ReplyDelete
  9. \begin{eqnarray}
    \begin{array}{rcl}
    \alpha\beta & = & {1\over
    2}\left(\alpha\otimes\beta+\beta\otimes\alpha\right),\\
    \\
    \alpha\wedge\beta & = & {1\over
    2}\left(\alpha\otimes\beta-\beta\otimes\alpha\right).
    \end{array}
    \end{eqnarray}

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
  10. i followed your steps but im unable to get it working on my blog.. where am i going wrong? can you guide me a bit? Thanks

    ReplyDelete
  11. This comment has been removed by the author.

    ReplyDelete
  12. Thanks mate, it is just simply what I need. To write $3x+6y=8$ in my blog. :)

    ReplyDelete
  13. Do the formulas work in Preview mode? In my case, they don't.

    Thanks.

    ReplyDelete
    Replies
    1. In my case the formulas work in Preview mode.

      Delete
  14. How is anyone getting this to work? I just created a Blogger account. I see no "Design" option anywhere, and I certainly see no way to edit the raw HTML header of my blog.

    I had a mathematics blog on a Joomla site a while back, where I had written a Joomla plugin to render LaTeX. That site is gone. I'd like to migrate that blog to Blogger, but not if I can't get MathJax working.

    ReplyDelete
    Replies
    1. Ah, I almost got it. On my dashboard, left column, I click on Template. Under the thumbnail shown as "Live on Blog" I click "Edit HTML" and insert the javascript into the header.

      The problem is, it still isn't working.

      Delete
    2. Aha!

      Andy posted this in 2011, and apparently things have changed, according to what I have found in the Google support forum.

      The new dynamic view blogger themes make integrating MathJax a bit harder now.

      To get MathJax to work in the modern Blogger, you have to insert the following Typeset() method call at the end of each post:

      <script type="text/javascript">MathJax.Hub.Queue(["Typeset",MathJax.Hub]);</script>

      See http://docs.mathjax.org/en/latest/typeset.html

      There may be a place to insert this call near the end of the template, but I haven't found any place where this works. It works only if you insert it at the end of each blog post.

      Unfortunately, this is kind of a kludge. And won't allow for math formulas in comments.

      Delete
    3. i put it on the end of the html code of a post and it didnt work

      Delete
  15. Well updating again regarding blogger. In my blogger is working fine just the numbering option that still not working....

    ReplyDelete
    Replies
    1. Updating it's working perfectly as long is you don't change anything in style, font syze, font type etc.... Any change on those things will include extra html code and mess-up with MathJax.

      Delete
    2. Again... heheh just adding works perfectly with simple view.

      Delete
  16. Thanks! I was hoping for a simple explanation and you delivered!

    ReplyDelete
  17. \begin{equation}
    \frac{1+x+x^2}{1+y+y^2}
    \end{equation}

    ReplyDelete
  18. Good work

    tsg
    mbaapti.blogspot.com

    ReplyDelete
  19. Works great, thanks for sharing.

    ReplyDelete

  20. \[\mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix}
    \mathbf{i} & \mathbf{j} & \mathbf{k} \\
    \frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\
    \frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0
    \end{vmatrix} \]

    ReplyDelete
  21. This comment has been removed by the author.

    ReplyDelete
  22. this not work for cell , esta aplicacion no se puede ver en celulares

    ReplyDelete
  23. $ \sum_{k=0}^\infty x^k = \frac{1}{1-x}$

    ReplyDelete
  24. $x^n + y^n = z^n$

    ReplyDelete
  25. \begin{equation} \frac{1+\sqrt{5}}{2} \end{equation}

    ReplyDelete
  26. this worked great! Thanks for posting

    ReplyDelete
  27. awesome... thank you for this post

    ReplyDelete