Adding MathJax to Octopress

I added MathJax to my Octopress site so that I could write TeX-style mathematical expressions.

There is also a way to use MathJax.rb, but I did not like having to wrap formulas in math and endmath tags, so I chose to use kramdown instead.

Change the Markdown engine

Change the Markdown engine from the default rdiscount to kramdown.

Open config.yaml and change the markdown: setting from rdiscount to kramdown.
Open Gemfile and change gem 'rdiscount' to gem 'kramdown', '~> 0.13.8'.

Add MathJax

Open source/_includes/custom/head.html and add the following code.

<!-- mathjax config similar to math.stackexchange -->
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    jax: ["input/TeX", "output/HTML-CSS"],
    tex2jax: {
      inlineMath: [ ['$', '$'] ],
      displayMath: [ ['$$', '$$']],
      processEscapes: true,
      skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
    },
    messageStyle: "none",
    "HTML-CSS": { preferredFont: "TeX", availableFonts: ["STIX","TeX"] }
  });
</script>
<script
  src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"
  type="text/javascript"
></script>

Fix the right-click bug in MathJax

There is a bug where right-clicking a MathJax formula turns the screen completely white, so fix that as follows. Open sass/base/_theme.scss and change it like this.

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

Test

When writing formulas, wrap them like this with $$.

$$
\begin{eqnarray}
E &=& mc^2                              \\
m &=& \frac{m_0}{\sqrt{1-\frac{v^2}{c^2}}}
\end{eqnarray}
$$

\begin{aligned} E &= mc^2 \\ m &= \frac{m_0}{\sqrt{1-\frac{v^2}{c^2}}} \end{aligned}

Change the Markdown engine

Add MathJax

Fix the right-click bug in MathJax

Test

References