# LaTeX math in Octopress

November 28, 2012

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).

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 $\$.