Octopress に MathJax を導入する
March 01, 2014
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}
$$