javascript - 使用 KaTeX 在 node.js 模板中渲染数学

Question

我想在 node.js 中使用 latex 模式在页面中渲染数学。我看过 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 代码中专门设置每个变量。

编辑

我从模板中获取 html

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);
  });
});

这是一个好方法吗？或者我可以在使用 res.send() 之前省略调用 res.render() 吗？

当我使用时

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

服务器失败，我收到错误ParseError:KaTeX解析错误:预期'EOF'，在位置1处得到'$':$_

Answer 1

KaTeX 核心不关心文本输入来自何处。识别 TeX 源代码片段不是其目标的一部分。有一个名为 auto-render 的贡献扩展它作为 KaTeX 代码库的一部分进行维护。它将识别页面中的 TeX 输入，并将其替换为 KaTeX 渲染的 HTML。但它在客户端操作 DOM 树，而不是在服务器端操作 HTML 标记文本。

所以我建议您在这里滚动自己的代码。我猜你不需要任何 DOM 解析。相反，我会尝试想出一些合适的正则表达式来描述数学 block ，然后用它们的 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 });
});

根据您的使用案例，您可能希望将此替换应用于您的输入模板、您提供给模板的参数，或者您通过渲染模板获得的结果。在所有这三种情况下，您都应该尝试在某个时刻以单个字符串的形式获取 HTML 文本的相关部分。在某些情况下，这可能涉及缓冲基于流的模板输出。由于您没有说明模板和应用服务器使用什么框架，因此我无法提供更多详细信息。

请注意，上面给 TeX 的优先级高于 HTML:输入像 $$a<p>b$$被解释为 TeX 输入 a < p > b 。这与客户端渲染(如通过自动渲染器)形成对比，其中上面的内容将被视为两个段落，它们都不包含完整的 TeX 输入片段，以及在哪里实现 a < p > b渲染者必须对 < 进行编码如< 。如果您控制所有输入，那么给予 TeX 优先权可能就是您想要的。但是，如果您接受用户提供的输入，则此行为可能会导致某些内容清理过程或 Wiki 标记格式化代码出现意外。因此，如果您打算按照这些思路做任何事情，请确保您知道自己想要什么行为，并让您的客户意识到这一点。

如果您想获得与 TeX 更高的兼容性，您可以尝试支持其他顶级环境。例如，您可以包括

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

使用 aligned 的事实环境已实现，同时 align*环境还没有。

<小时/>

响应您的编辑:

res.render的组合带有回调和 res.send在这个回调里面对我来说看起来不错。您可以避免调用 res.render如果您自己调用模板渲染，但这由您决定是否需要。

在不知道输入的情况下很难确定错误消息的原因。似乎您可能有一些以双 $$ 开头的输入但仅以一个 $ 结尾，因此第一个正则表达式无法匹配，第二个正则表达式包含额外的 $在其匹配的字符串中。