コンテンツにスキップ

Material for MkDocsで数式を表示する方法

MkDocsで数式を表示する方法について説明します。 基本的にはMkDocsのドキュメントを参考にすれば問題なく動作します。

古いサイトではPolyfill.ioを設定するような記載がありますが、マルウェア改変事件があってからは別の方法に変更されています。

MkDocsの設定

mkdocs.ymlに以下の設定を追加します。

YAML
1
2
3
4
5
6
7
markdown_extensions:
  # MathJax
  - pymdownx.arithmatex:
      generic: true
extra_javascript:
  - javascripts/mathjax.js
  - https://unpkg.com/mathjax@3/es5/tex-mml-chtml.js

docs/javascripts/mathjax.jsに以下の内容を記述します。

JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
window.MathJax = {
  tex: {
    inlineMath: [["\\(", "\\)"]],
    displayMath: [["\\[", "\\]"]],
    processEscapes: true,
    processEnvironments: true
  },
  options: {
    ignoreHtmlClass: ".*|",
    processHtmlClass: "arithmatex"
  }
};

document$.subscribe(() => { 
  MathJax.startup.output.clearCache()
  MathJax.typesetClear()
  MathJax.texReset()
  MathJax.typesetPromise()
})

数式の記述

インライン数式

数式は$で囲むことで記述できます。

Markdown
1
$F = m \ddot{x}$

表示した結果

\(F = m \ddot{x}\)

ブロック数式

$$を改行して記述することでブロック数式として表示されます。

Markdown
1
2
3
$$
F = m \ddot{x}
$$

表示した結果

\[ F = m \ddot{x} \]

プライバシープラグインを利用している場合

Javascriptを外部依存しないようにセルフホストするプライバシープラグインがありますが、これを有効化すると、数式が綺麗に表示されなくなるので注意が必要です。