Octopress に MathJax を導入する

Posted Sat Mar 01 2014

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

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

Markdown エンジンの変更

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

  1. config.yaml を開き markdown: の設定を rdiscount から kramdown に変更します
  2. 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{eqnarray} E &=& mc^2 \ m &=& \frac{m_0}{\sqrt{1-\frac{v^2}{c^2}}} \end{eqnarray} $$

参考