Octopress に MathJax を導入する

Octopress で Tex スタイルの数式が書けるように MathJax を導入しました．

MathJax.rb を使う方法もありますが，数式を math，endmath タグで囲む点が嫌だったので kramdown を使うほうにしました．

Markdown エンジンの変更

markdown のエンジンをデフォルトの rdiscount から kramdown に変更します

config.yaml を開き markdown: の設定を rdiscount から kramdown に変更します
Gemfile を開き gem 'rdiscount' を gem 'kramdown', '~> 0.13.8' に変更します

MathJax の導入

source/_includes/custom/head.html を開き下記のコードを追加します

<!-- 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>

MathJax の右クリック時のバグ対策

MathJax の数式を右クリックすると画面が真っ白になってしまうバグがあり，その対策をします．sass/base/_theme.scss を開き下記のように変更します

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

テスト

数式を書くときは下記のように $$ マークで囲います．

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

Markdown エンジンの変更

MathJax の導入

MathJax の右クリック時のバグ対策

テスト

参考