Friday, August 21, 2015

Blogspot Math Formatting

One of the things I noticed when I did the first Project Euler was how unreadable the math behind it was. For this reason (and the fact I seem to be on a blog customization kick) I looked for a way to integrate a cleaner math plugin. I did some research and found recommendations for MathJax. I went through and figured out how to include it in blogspot and this is the resulting post documenting it.

One of the cool things is it hosts it on a CDN for us so we don't have to upload it, which also means that browsers can cache it from other sites to reduce the amount of bandwidth required. That alone is a huge benefit in my opinion. We can include it in a blogspot by going to Template→Customize HTML. If you follow the steps on MathJax docs you can put it either before the </head> or at the bottom before the </body>. I prefer the body, and we will use the following script import:
<script type="text/javascript" src="path-to-mathjax/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
This tells the user browsing your Blogspot where to get the javascript file. And it also tells it to use some default configuration (which MathJax says is not necessary).

Then we have to do the configuration of it, which I put just below the import and I used the following javascript:
<script language='javascript' type='text/javascript'>
      MathJax.Hub.Config({
       extensions: ["tex2jax.js","TeX/AMSmath.js","TeX/AMSsymbols.js"],
       jax: ["input/TeX", "output/HTML-CSS"],
       tex2jax: {
           inlineMath: [ ['$','$'], ["\\(","\\)"] ],
           displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
       },
       "HTML-CSS": { availableFonts: ["TeX"] }
      });
</script>
This is a little more extensive than the ones provided by the MathJax. Now theoretically we could start building LaTeX however, I was not able to get the format specified by the docs. They have the following in the <body> tag but it would not display for me.
<body>
When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
>/body<
However, I was able to get the MathML input to work so the following does work:
<body>

<p>
When
<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mi>a</mi><mo>≠</mo><mn>0</mn>
</math>,
there are two solutions to
<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mi>a</mi><msup><mi>x</mi><mn>2</mn></msup>
  <mo>+</mo> <mi>b</mi><mi>x</mi>
  <mo>+</mo> <mi>c</mi> <mo>=</mo> <mn>0</mn>
</math>
and they are
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
  <mi>x</mi> <mo>=</mo>
  <mrow>
    <mfrac>
      <mrow>
        <mo>−</mo>
        <mi>b</mi>
        <mo>±</mo>
        <msqrt>
          <msup><mi>b</mi><mn>2</mn></msup>
          <mo>−</mo>
          <mn>4</mn><mi>a</mi><mi>c</mi>
        </msqrt>
      </mrow>
      <mrow> <mn>2</mn><mi>a</mi> </mrow>
    </mfrac>
  </mrow>
  <mtext>.</mtext>
</math>
</p>

</body>
Which should give us some formatted output like this:

When a0 , there are two solutions to ax2 + bx + c = 0 and they are:

x = b ± b2 4ac 2a .

Cool! Now those nifty math expressions can be interpreted and displayed in a much more user friendly way. Although the MathML notation seems a lot more verbose, I will keep playing with the LaTeX form and possibly the AsciiMath input. For the time being it is just nice to have a method to show clean mathematical equations.

No comments:

Post a Comment