MathJax support for rendering equations

MathJax support for rendering equations

If I’m going to occasionally write posts about math (and that is the plan), I need the ability to render equations. It’s not a strict necessity; you can get pretty far by literally describing what it is that you’re trying to say. For example:
The Riemannian gradient over the compact Stiefel manifold of the Rayleigh quotient with respect to some square matrix and a given conformal subspace can be computed as the orthogonal complement with respect to a basis for that subspace of the product of said matrix and said basis.
However, though it may not be worth a thousand words, an equation in this case is worth approximately fifty words:

$$\nabla\ \textrm{RQ}_A(\textrm{colspan}(V)) = (I – VV^T)AV$$

Or, appropriately rendered:
∇ RQA(colspan(V))=(I−VVT)AV
∇ RQA(colspan(V))=(I−VVT)AV
Fortunately, there are more solutions for this than the last time I looked (approximately ten years ago). And if you Google “math, latex and hugo” (as I did), you find the following on the official Hugo website: MathJax support in Hugo.
And so, because I’m a fan of test-driven development, I wrote up this post with a little math (i.e., the block math above) and this inline SVD here: Avi=uiσiAvi=uiσi. And because I hadn’t gone through the steps in the post above, it looked like shit (i.e., the test failed):

This post before MathJax support
But when you add in the steps from the article to add MathJax support to all pages (e.g., in the footer), it’s mostly good. My text editor (vim) still doesn’t understand the LaTeX subscript underscores in the markdown files:

Vim thinks this is bad markdown
But I can deal with that in a few ways: ignore it, or tell vim not to do syntax highlighting on markdown files (set filetype). I’ll update this post if I find a better solution. But in the meantime, I don’t have any excuse not to do math posts.
Update: MathJax pops up obnoxious loading/processing messages in the browser while it is loading. You can disable this by setting messageStyle to ‘none’, like so:

messageStyle: ‘none’,
showProcessingMessages: false,
tex2jax: {
// tex2jax config…


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s