作成: 2021年02月07日
更新: 2021年03月29日
mathjax@3を使う.MathJax-nodeやmathjax-node-pageは使わない.
marked.jsで数式をLaTeX式で挿入したいではクライアントでLaTeXをレンダリングしていたが記事投稿,記事更新のタイミングであらかじめレンダリングしたほうがパフォーマンスが上がるのでhtmlファイルを読み込んで$で囲まれたLaTeXをレンダリングするNodeスクリプトを書いてサーバー側で実行するようにしたい.
MathJaxはv2まではクライアントで実行するのが前提になっていてNode.jsで実行できるようにはなっていなかった.そこでMathJax-nodeやmathjax-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のデモを参考にした.コールバックで書いているが当然async
,await
でもかける.
以下のようにレンダリングされる.
インライン
ディスプレイ