如何在AstroJS项目中使用MathJax在构建过程中将页面上的所有\[tex\]代码排版为MathML代码

问题描述 投票：0回答：1

我在最近的项目中开始使用 AstroJS 作为静态站点生成器。使用 AstroJS 的主要优点是能够在 

--- ---
文件的 
.astro
代码围栏部分运行 JS 代码，以生成零 JS 代码的网页。

当通过使用 

<script>
标签的 CDN 包含在网站中时，MathJax 会使页面加载时间更长，处理时间也更长。

  • 减少加载时间的一种解决方案是使用 AstroJS 的 Components 仅在所需页面上包含 MathJax javascript 文件。

  • 为了减少页面加载期间的处理时间，我们可以使用 MathJax 的 Lazy Typesetting。

由于 AstroJS 可以在构建时运行 JS 代码，所以我想将 

tex-mml-chtml.js
文件导入到网页中，然后执行 
MathJax.typeset()
。

这是我迄今为止尝试过的代码：

---
import { MathJax } from '../scripts/tex-mml-chtml.js';
MathJax.typeset();
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>Astro</title>
  </head>
  <body>
    <h1>Astro</h1>
    \[x^2+2x+15=0\]
  </body>
</html>

这给了我错误

"MathJax" is not exported by "src/scripts/tex-mml-chtml.js"

是否有一种简单的方法可以在构建过程中将内联 TeX 代码（如 

\[x^2+2x+15=0\]
）转换为 MathML 代码？

MathJax-节点？：

可以使用 MathJax-Node 包将 tex 转换为 mathml 吗？ 文档页面上没有太多解释。

我尝试过

npm install mathjax
，
npm install mathjax-full
，
npm install mathjax-node
。所有这些都会给出诸如 
 type require not found
之类的类型错误。我在项目中没有使用 TypeScript，因为我还没有真正学过 TS。

node.js typescript mathjax astrojs
1个回答
0
投票

tex-mml-chtml.js
文件没有任何导出，但它确实创建了一个可供您使用的全局变量 
MathJax
。但请注意，您不必调用 
MathJax.typeset()
本身，因为 
tex-mml-chtml.js
会在页面加载完成时自动执行此操作。

要认识到的一件事是，除了 

tex-mml-chtml.js
之外，MathJax 还可能加载其他文件。例如，您需要有可用的字体文件，因此如果您刚刚将 
tex-mml-chtml.js
移动到脚本目录，这可能还不够。由于您是导入文件而不是通过 
<script>
标签加载文件，MathJax 将无法确定其他文件的位置，因此您可能需要设置 MathJax 配置来指定 
mathjax
路径。如果您使用 
npm install mathjax
，那么您需要包含 
node_modules/mathjax/es5
目录中的所有内容。

在文档中包含正确的 

<script>
标签可能会更容易 
<head>
以便 MathJax 能够找到其文件。在这种情况下，您可以使用 CDN 中的 MathJax，而不是拥有自己的副本（除非您需要离线工作）。有关详细信息，请参阅文档。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.