LaTeX math in Octopress

Update: I no longer maintain this blog using Octopress, but I will leave this post here in case it may be of use to people. For the curious, I now convert my markdown posts to html using Pandoc, which has a --mathjax option that renders \(\LaTeX{}\) on the fly.

With the help of Google and some smart Octopress bloggers (here, particularly), I’ve successfully managed to get \(\LaTeX{}\) math to show up in my Octopress blog. Octopress uses rdiscount as the default markdown implementation/parser/converter-to-HTML, but unfortunately rdiscount cannot parse or convert \(\LaTeX{}\) code (because \(\LaTeX{}\) code is, of course, not markdown).

That’s where kramdown comes in. It parses and converts a superset of markdown, including \(\LaTeX\), meaning that together with MathJax you can have beautiful \(\LaTeX\) math code rendered directly into your browser.

You can have both inline math, e.g., \(A^{\ast} = \bigcup_{i=0}^{\infty} A^{i}\), as well as blocks of math. For example, as Kaplan and Kay (1994) tell us, if \(A\) and \(B\) are regular \(n\)-relations, then so are

\[ \begin{align} \mbox{$n$-way concatenation: } & A \cdot B = \{xy\mid x \in A, y \in B\} \\ \mbox{Union: } & A\cup B = \{x\mid x \in A \text{ or } x \in B\} \\ \mbox{$n$-way Kleene closure: } & A^{\ast} = \bigcup_{i=0}^{\infty} A^i \end{align} \]

Right-click on any of the math to view the MathJax options, including the option to open the source code in a new window/tab. To get this all up and running, follow these steps.

1. Install kramdown

gem install kramdown

2. Replace rdiscount with kramdown

Open _config.yml, and change markdown: rdiscount to markdown: kramdown.

3. Optional

Open Gemfile, and change gem rdiscount to gem kramdown, and change the version number to whatever version you installed. This way if you migrate your blog to a new machine, it’ll complain if you try to rake generate before grabbing kramdown (at least I think).

4. Add MathJax script

Add the following MathJax script to source/_layouts/default.html:

<!-- mathjax config similar to math.stackexchange -->
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  tex2jax: {
    inlineMath: [ ['$', '$'] ],
    displayMath: [ ['$$', '$$']]
  }
});
</script>
<script type="text/javascript"
  src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

5. Fix right-click bug

At this point, kramdown and MathJax should both work; however, there’s a bug where if you right-click on any math, the website turns blank for as long as the MathJax contex menu is open. To fix this, open sass/base/_theme.scss and change

body {
  > div {
    background: $sidebar-bg $noise-bg;
    border-bottom: 1px solid $page-border-bottom;
    > div {
      background: $main-bg $noise-bg;
      border-right: 1px solid $sidebar-border;
    }
  }
}

to

body {
  > div#main {
    background: $sidebar-bg $noise-bg;
    border-bottom: 1px solid $page-border-bottom;
    > div {
      background: $main-bg $noise-bg;
      border-right: 1px solid $sidebar-border;
    }
  }
}

In other words, change the first occurrence of div to div#main.

Important: If, like me, you customized your background and therefore override this body block in sass/custom/_colors.scss, then you have to change the first occurrence of div to div#main in both files.

Now you can create inline math by surrounding the code with $, and block math by surrounding the code with $$.