Quick KaTeX update

So, KaTeX has gone through quite a few revisions since the last time I looked. It now has an Auto-render extension that makes it just as easy to use as MathJax. It also seems to be working much better now in Blogger!

This post is just a quick demonstration of the ways you can get KaTeX working. At the end of the post, I'll include the minimal HTML that you can enter in the Blogger composer window to reproduce this post.

Method 1: 

Use katex.render on DOM elements. This can be automated done individually as in the KaTeX readme examples or by the small script I showed last time. Here are two examples:
Inline: (x+iy)^2=x^2-y^2+2ixy \ .

Display: \displaystyle \int_0^\infty x^n e^{-x} = (-1)^n\frac{d^n}{da^n} \int_0^\infty e^{-ax}\Big|_{a=0} \ .

Method 2: 

Use the Auto-render extension to pick up the standard maths delimiters (just like MathJax). This is enabled by including the auto-render.min.js script and calling its renderMathInElement function to recursively find and render the maths in the document. Here are two examples:
Inline: \( (x+iy)^2=x^2-y^2+2ixy \).
Display: \[ \int_0^\infty x^n e^{-x} = (-1)^n\frac{d^n}{da^n} \int_0^\infty e^{-ax}\Big|_{a=0} \ . \] 

The second method is the best one for use in Blogger for a couple of reasons:

• It's easier to type. Once the scripts are inserted at the top and bottom of the document, everything can be done in the normal Compose mode.
• No switching to HTML to add div and block elements to be rendered by the script.
• You won't accidentally nuke those div and block elements when in the normal Compose mode where they are invisible
• The display-style maths has all of the right options out of the box. The simple script I provided last time only affected the formatting of the maths and not the placement in the document.
• Compatibility of your document with both MathJax and KaTeX. All you need to do is switch over the couple of script lines.

The Code:

<!-- Update version numbers when appropriate -->

<link href="http://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.5.1/katex.min.css" rel="stylesheet"></link>
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.5.1/katex.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.5.1/contrib/auto-render.min.js"></script>

<h3>Method 1:</h3>

Inline: <block class="eqn">(x+iy)^2=x^2-y^2+2ixy \ . </block><br />

Display: <block class="eqn">\displaystyle \int_0^\infty x^n e^{-x} = (-1)^n\frac{d^n}{da^n} \int_0^\infty e^{-ax}\Big|_{a=0} \ .</block><br />

<h3>Method 2:</h3>

Inline: \( (x+iy)^2=x^2-y^2+2ixy \). <br />

Display: \[ \int_0^\infty x^n e^{-x} = (-1)^n\frac{d^n}{da^n} \int_0^\infty e^{-ax}\Big|_{a=0} \ . \]

<!-- Script for Method 1 - needs both katex.min.css and katex.min.js -->

<script type="text/javascript">
    var eqn = document.getElementsByClassName("eqn");
    [].forEach.call(eqn, function(e) {katex.render(e.innerHTML, e);});
</script>

<!-- Script for Method 2 - also needs auto-render.min.js -->
<script>
    renderMathInElement(document.body);
</script>