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 on the fly.

With the help of Google and some smart Octopress bloggers (here, particularly), I’ve successfully managed to get 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 code (because code is, of course, not markdown).

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

You can have both inline math, e.g., , as well as blocks of math. For example, as Kaplan and Kay (1994) tell us, if and are regular -relations, then so are

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