org-modeで #+OPTIONS: tex:t として数式をTeXで書き org-html-export-as-html でHTML出力すると、そのHTMLに tex-mml-chtml.js が加わる。この tex-mml-chtml.js は MathJax のライブラリであり、同じようにこのウェブサイトでも利用したい。

MathJaxのHPではライブラリをサイトに組み込む例として以下の案内がある。

1
2

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

私はcdnjsを利用したい。念の為にファイルのハッシュを判定する integrity にハッシュ値を入れておく。クロスオリジンを anonymous にしないと動かないから加えた。またPolyfillを使うようなサイトではないだろうと同JSライブラリは削った。 async から defer に変更したのはHTMLページの解析が終わる前にJavaScriptを実行したいような急ぎの要件がないからだ。

1
2
3
4
5
6

<!-- 実際に改行を入れない -->
<script defer
        id="MathJax-script" 
        src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.2/es5/tex-mml-chtml.min.js"
        integrity="sha512-6FaAxxHuKuzaGHWnV00ftWqP3luSBRSopnNAA2RvQH1fOfnF/A1wOfiUWF7cLIOFcfb1dEhXwo5VG3DAisocRw=="
        crossorigin="anonymous"></script>

例として1つ行列を書いた。数式を右クリックするとTexをコピーできる。
なお、数式は「実例で学ぶゲーム3D数学 7章 行列と線型変換 式7-5 (P107)」が出典。

\[R(n, \theta) = \begin{bmatrix} p^{\prime} \\ q^{\prime} \\ r^{\prime} \end{bmatrix} = \begin{bmatrix} n_{x^2} (1 - \cos \theta) + \cos \theta & n_x n_y (1 - \cos \theta) + n_z \sin \theta & n_x n_z (1 - \cos \theta) - n_y \sin \theta \\ n_x n_y (1 - \cos \theta) - n_z \sin \theta & n_{y^2} (1 - \cos \theta) + \cos \theta & n_y n_z (1 - \cos \theta) + n_x \sin \theta \\ n_x n_z (1 - \cos \theta) + n_y \sin \theta & n_y n_z (1 - \cos \theta) - n_x \sin \theta & n_{z^2} (1 - \cos \theta) + \cos \theta \end{bmatrix}\]

1. MathJax | Beautiful math in all browsers.
2. MathJax Documentation — MathJax 3.2 documentation
3. LaTeX fragments (The Org Manual)
4. HTML export commands (The Org Manual)