MathJaxをNode.jsで動かす

作成: 2021年02月07日

更新: 2021年02月07日

結論

mathjax@3を使う.MathJax-nodemathjax-node-pageは使わない.

やりたいこと

marked.jsで数式をLaTeX式で挿入したいではクライアントでLaTeXをレンダリングしていたが記事投稿,記事更新のタイミングであらかじめレンダリングしたほうがパフォーマンスが上がるのでhtmlファイルを読み込んで$で囲まれたLaTeXをレンダリングするNodeスクリプトを書いてサーバー側で実行するようにしたい.

MathJaxをNode.jsで使う方法

MathJaxはv2まではクライアントで実行するのが前提になっていてNode.jsで実行できるようにはなっていなかった.そこでMathJax-nodemathjax-node-pageといったNode.jsでも動くようなライブラリが開発され,MathJax Node などと調べるとこれらを使った記事も散見される.しかしMathJax v3ではNode.jsでの実行がサポートされたため現在はMathJax本体を使うことが推奨される.

スクリプトの書き方

まずmathjax@3をインストールする

npm install mathjax@3

以下のようにしてhtmlテキストをレンダリングできる.

const htmlText = `
<p>
インライン $ a = \\lambda $
</p>
<p>
ディスプレイ
$$
b = \\delta
$$
</p>
`;
require("mathjax")
    .init({
        loader: { load: ["input/tex", "output/chtml"] },
        chtml: {
            fontURL:
                "https://cdn.jsdelivr.net/npm/mathjax@3/es5/output/chtml/fonts/woff-v2",
        },
        startup: {
            document: htmlText,
        },
        tex: {
            inlineMath: [
                ["$", "$"],
                ["\\(", "\\)"],
            ],
            displayMath: [
                ["$$", "$$"],
                ["\\[", "\\]"],
            ],
        },
    })
    .then((MathJax) => {
        const adaptor = MathJax.startup.adaptor;
        const html = MathJax.startup.document;
        if (html.math.toArray().length === 0) {
            adaptor.remove(html.outputJax.chtmlStyles);
        }
        const outputHtml = adaptor.outerHTML(adaptor.root(html.document));
        console.log(outputHtml);
    })
    .catch((err) => console.log(err.message));

基本的にはMathJaxのデモを参考にした.コールバックで書いているが当然asyncawaitでもかける.

以下のようにレンダリングされる.

インライン

ディスプレイ