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.

Backing up Google Docs and Sites when changing Domains

After three years teaching, I am moving to a new school. This one is closer to home, (hopefully) making work-life balance work-life satisfaction a lot easier. I'm also teaching a different range of subjects and students, so it will be a good learning experience.

Both my new and old schools use Google Apps for Education. All the teachers I know moving from both of these schools had issues with what to do with the Google Docs and other resources tied up in that GAE domain.

This post is to document some of the moves I made to transfer and/or backup all of the resources and information from my GAE account at my old school.

Google Take-out

On the whole, Google does try to take seriously the idea that you should be able to take your own data once you've done lending it to them. 

Google Take-out has a nice interface that is easy to use and more information can be found in their support sites. The support site also implicitly admits that moving from one domain to another is not easy - e.g., Google docs need to be transferred via another file format...

Pros

• Really easy! Just select the services you wish to archive and the formats that it should use, then it bundles it all into a few big zip files ready for download.

Cons

Basically, live objects get archived and lose some properties you want to keep.

• Google docs, sheets, slides, drawings and forms get converted to other formats, inevitably losing some formatting or other information. For example, Docs can get converted to either MS Word, OpenOffice Text, PDF, RTF or Plain text. 
• Blogger sites get archived as Atom XML
• Similarly, most data is archived in formats that the average user will not enjoy playing with!
• Google sites do not get archived at all...

There are probably good reasons that it is not made too easy to transfer ownership of Google docs outside of your workplace's domain. 

Google Docs and Drive Migrator

Although you can't transfer ownership of a Google Doc (or Sheet etc) outside of a domain, you can share it to an outside account that can then copy it. This preserves all of the Google docs formatting, but does lose the sharing settings. Which is good enough for most documents I need for school!

This process is automated using Drive Migrator. This was originally a Google Apps Script that was shared and found in many old sites and forums, but is now packaged up nicely as a Chrome App. The basic idea is that you put all the files you want to copy across into their own folder and then use Drive Migrator to transfer that folder. See their site for more info.

I have two tips to add to their instructions:

1. You don't have to move files to a folder, which is what simple dragging the file or using the context menu provides. You can copy the file by dragging it while holding down Control (just like in most file managers) or by using the Drive shortcut Shift-z.
2. You will probably have to put the files you want to transfer into a few separate folders so that the script does not timeout.

Google sites

Sites are not part of Google Take-out, so they need to be approached separately. Google did have a Java program called Google Sites Liberation, but it has not been updated since 2011 and was archived when Google Code started switching off as part of their migration of such projects to GitHub. Unfortunately, the password login that the project used is now depreciated, so the program no longer works. Fortunately, it was updated to OAuth2 by a kind soul (thank you!) and the jar file and source code are available on GitHub: Google sites liberation (OAuth2). The only difference in its use to the original version is that instead of entering your login details, you go to a webpage to get a OAuth certificate so that the app can use your account.

The downloaded sites have lost some formatting, but the structures and attached files are still there, which is good enough for my purposes.

There is also a Python project Google sites backup that uses the Google created gdata Python modules and APIs, however it did not work in my first try and I didn't have time to play with it after that. That said, I would like to play with it one day, since the gdata-python-client looks really useful!

Blogger

This one was easy. Just add the other account to the blog as a Administrator and you're done.

Google Docs Add-ons

This one is tricky. I don't know of a good way to transfer ownership of an Add-on and this will be tricky for my Formula Editor add-on.

If you know of a good solution, please post a comment here and/or add an answer to the following stackoverflow question: Transfer ownership of Google Doc Add-on to another account?

Your turn

That's basically all that I tried. Did I miss something? Is there an easier way? Please leave a comment below.

MathJax vs KaTeX in blogger

Being a blog that will often contain some mathematics and physics, I will need to typeset some mathematics. Since MathML has dismal support, with Chrome and IE not looking like supporting it soon, the default solution [1] is currently MathJax.
MathJax renders maths from LaTeX or MathML source across all major browsers and renders it beautifully. It also allows for numbered equations and cross referencing. Sounds perfect!
The problem is that it's a very large javascript library (mitigated somewhat by it being served from its own CDN) and quite slow at rendering mathematics, especially on slow connections or low powered devices.
Other options include: using images, possibly automatically rendered via CodeCogs;
various CSS hacks that don't typeset the mathematics perfectly [1, 2, ...]; and the new comer, KaTeX. KaTeX is trying to walk the middle line and get relatively fast maths rendering, cross platform and has a fall-back to MathJax.


MathJax is easy to enable and use. In HTML editing mode,

simply add the following code to load MathJax from their CDN:
<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" type="text/javascript"></script>
Then just type inline LaTeX mathematics between the \( \) delimiters and displaystyle mathematics between the\[...\] delimiters.

You could add this code to the template of your blogger blog, however I couldn't get this working on my blog and apparently it keeps getting broken as the Google developers change aspects of the Blogger platform.

Here's an example of MathJax rendered mathematics: \( (x+iy)^2=x^2-y^2+2ixy \).
\[ \int_0^\infty x^n e^{-x} = (-1)^n\frac{d^n}{da^n} \int_0^\infty e^{-ax}\Big|_{a=0} \ . \]


KaTeX is a little harder to use in Blogger. This is mainly because the KaTeX script will not search for customizable delimiters like the MathJax script. Instead, you need to actually tell KaTeX what divs to render. Here is the simplest work flow that I have managed to come up with a minimal amount of thought and time.

First, load the script and stylesheet. For convenience I choose to load them from the cloudflare CDN service. Add the following lines to the top of the page in HTML editing mode:
<link href="htpp://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.1.0/katex.min.css" rel="stylesheet"></link>
<script src="http://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.1.0/katex.min.js"></script>

Type your maths in using LaTeX snippets, then in HTML mode wrap them with a div or block: e.g.,
<block class="eqn">(x+iy)^2=x^2-y^2+2ixy</block>
will render inline as (x+iy)^2=x^2-y^2+2ixy. Using the \displaystyle TeX command will change the maths to look like

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

At the end of the document you need a script like:
<script type="text/javascript">
    // get and render all elements in DOM with the class 'eqn'
    var eqn = document.getElementsByClassName("eqn");
    [].forEach.call(eqn, function(e) {katex.render(e.innerHTML, e); });
</script>

Conclusion: For now I think I will stick with MathJax. It is easier to use in Blogger as you can just type your LaTeX in as normal text and not have to worry about switching to the HTML view. Also, I don't plan on having posts that are too math heavy...