KaTeXでnode.jsテンプレートの数学をレンダリングする

Question

ラテックスモードのページで数値計算をnode.jsにしたいとします。私はMathJaXとKaTeXを見ました。

私はこのページの数学は数学としてレンダリングされていることを確認することができますどのように

router.get('/math', function (req, res) { 
    res.render('math'); 
}); 

と私のページをレンダリング？

私は

const katex = require('katex'); 
const math = katex.renderToString("c = \\pm\\sqrt{a^2 + b^2}", { displayMode: true }); 

を使用して、

router.get('/math', function (req, res) { 
    res.render('math', { math: math }); 
}); 

でテンプレート内の変数を設定するが、私はむしろ代わりに特異的に各変数を設定したテンプレートに直接すべての数学を書きたいと思うことができますJavaScriptコード。

私は

router.get('/math', function (req, res) { 
    res.render('math', function (err, html) { 
    html = html.replace(/\$\$(.*?)\$\$/g, function (outer, inner) { 
     return katex.renderToString(inner, { displayMode: true }); 
    }); 

    res.send(html); 
    }); 
}); 

でテンプレートからHTMLを取得しています編集

が、それはそれを行うには良い方法であるか、私はres.send()を使用する前res.render()を呼び出す省略することができますか？

私は、サーバーに障害が発生したと私はKaTeXコアは、テキスト入力がどこから来るのか気にしないエラーにParseError: KaTeX parse error: Expected 'EOF', got '$' at position 1: $_

Answer 1

を取得

html = html.replace(/\$\$(.*?)\$\$/g, function (outer, inner) { 
    return katex.renderToString(inner, { displayMode: true }); 
}).replace(/\$(.*?)\$/g, function (outer, inner) { 
    return katex.renderToString(inner); 
}); 

を使用しています。 TeXソーススニペットの特定はその目的の一部ではありません。 KaTeXコードベースの一部として維持されているauto-renderという拡張があります。ページ内のTeX入力を識別し、KaTeXでレンダリングされたHTMLに置き換えます。しかし、HTMLマークアップテキストのサーバー側ではなく、DOMツリー上でクライアント側を操作します。

ここで独自のコードを作成することをおすすめします。私はあなたがDOM解析をする必要はないはずだと思います。代わりに、数学のブロックを記述するのに適した正規表現をいくつか考えてみましょう。次に、これらをanalogonでrenderToStringに置き換えてください。ご使用のケースに応じて、

html = html.replace(/\$\$(.*?)\$\$/g, function(outer, inner) { 
    return katex.renderToString(inner, { displayMode: true }); 
}).replace(/\\\[(.*?)\\\]/g, function(outer, innner) { 
    return katex.renderToString(inner, { displayMode: true }); 
}).replace(/\\\((.*?)\\\)/g, function(outer, innner) { 
    return katex.renderToString(inner, { displayMode: false }); 
}); 

のようなものは、あなたがあなたのテンプレートに提供引数に、またはテンプレートをレンダリングから得る結果に、あなたの入力テンプレートにこの置換を適用することもできます。 3つすべての場合、HTMLテキストの関連部分をある時点で1つの文字列として扱うようにしてください。これは、ストリームベースのテンプレート出力をバッファリングする場合があります。テンプレートとアプリケーションサーバーにどのようなフレームワークを使用しているのかわからないので、これについてもっと詳しく説明することはできません。

上記はTeXにHTMLよりも高い優先順位を与えていることに注意してください。$$a<p>b$$のような入力はTeX入力a <p> bと解釈されます。これは、クライアント側のレンダリング（自動レンダラーのように）とは対照的です。上記は2つの段落として扱われ、完全なTeX入力フラグメントは含まれません。a <p> bレンダリングでは、 <を<とする。すべての入力を制御するならば、TeXの優先順位はあなたが望むものになるでしょう。あなたがユーザー提供の入力を受け入れるならば、この動作はいくつかのコンテンツサニタイズ手順、あるいはおそらくWikiマークアップ書式設定コードで驚きを引き起こすかもしれません。ですから、もしあなたがそれらの行に沿って何かをするつもりなら、あなたが望む振る舞いを知っていることを確認し、クライアントにそれを知らせるようにしてください。

さらに高度なTeXとの互換性を目指す場合は、追加のトップレベル環境をサポートすることもできます。たとえば、align*環境はいないがaligned環境が実装されているという事実を利用して

html = html.replace(/\\begin\{align\*\}(.*?)\\end\{align\*\}/g, function(outer, inner) { 
    return katex.renderToString("\\begin{aligned}" + inner + "\\end{aligned}", { displayMode: true }); 
}) 

含めることができます。あなたの編集に対応して

---

：そのコールバック内部のコールバックとres.sendとres.renderの

組み合わせは、私にはよさそうです。代わりに自分でレンダリングするテンプレートを呼び出した場合は、res.renderと呼ぶのを避けることができますが、それが望ましいかどうかはあなた次第です。

エラーメッセージの原因は入力を知らなくても決まりません。 $$という二重で始まる入力があっても、ただ一つの$で終わる入力があると、最初の正規表現が一致しないため、一致した文字列に$が追加されるようです。