この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

Markdownの編集中にリアルタイムにプレビューしてくれると非常に便利である。

vimでMarkdownを編集する場合には、previmを利用すると、browser上でほぼリアルタイムにプレビューしてくれる(marked.jsを利用しているらしい)。

さて、本記事では、Markdownで書いている文章に、数式を綺麗に表示させる方法について記載する。

数式を綺麗に表示させるために「MathJax」を利用する。

previmでMathJaxに対応したMarkdownを利用するためには、previmのpluginの下記を変更すればよい。

変更点1

「preview/index.html」に以下を挿入する。

    <script type="text/x-mathjax-config">
      MathJax.Hub.Config({
        CommonHTML: { matchFontHeight: false }
      });
    </script>
    <script async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML">
    </script>

変更点2

「preview/js/previm.js」に1行挿入する。

    if (needReload && (typeof getContent === 'function') && (typeof getFileType === 'function')) {
      var beforePageYOffset = _win.pageYOffset;
      _doc.getElementById('preview').innerHTML = transform(getFileType(), getContent());

      mermaid.init();
      Array.prototype.forEach.call(_doc.querySelectorAll('pre code'), hljs.highlightBlock);
      autoScroll('body', beforePageYOffset);
      style_header();

      // ↓の1行を挿入する。
      MathJax.Hub.Typeset(document.getElementById("preview"));
    }

数式の書き方

MathJaxを利用しているのでMathJaxの記法(TeXの記法に準拠しているらしい)で記述できる。

以下に記述の例を示す。

複数行数式の例

\\[
  E = mc^2
\\]

本記事の冒頭の画像は、この例の記述で表示される数式(のキャプチャ)である。

インライン数式の例

計算式「\\( \alpha \times \beta \\)」で表される。