3

我想在具有乳胶模式的页面中呈现数学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 代码中专门设置每个变量。

编辑

我正在从模板中获取 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.render()在使用之前省略调用res.send()？

当我使用

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

服务器出现故障，我收到错误ParseError: KaTeX parse error: Expected 'EOF', got '$' at position 1: $_

4

2 回答 2

3

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

所以我建议你在这里滚动你自己的代码。我猜你不应该需要任何 DOM 解析。相反，我会尝试提出一些合适的正则表达式来描述数学块，然后用它们的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 更高的优先级： Input like$$a<p>b$$被解释为 TeX input a < p > b。这与客户端渲染（如自动渲染器）形成对比，在客户端渲染中，上面将被视为两个段落，它们都不包含完整的 TeX 输入片段，并且在哪里实现a < p > b渲染必须将 as 编码<为&lt;. 如果您控制所有输入，则给予 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，但是否需要由您决定。

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

于 2016-07-04T10:11:43.623 回答
1 
/\\\((.*?)\\\)/g

在许多情况下不起作用，因为会发生以下情况：

在此处输入图像描述

多个公式被识别为一个，导致错误。

为了防止这种情况，使用

/\\\(((.)*?(?=\\\)))?\\\)/

例子

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

但是，仍然有一些警告，例如没有正确渲染的东西。另一种方法可能是https://joa.sh/posts/2015-09-14-prerender-mathjax.html（这是我要尝试的下一个......）

于 2020-04-16T20:52:59.997 回答