使用 mathjax 和 node.js 在 Web 浏览器中显示乳胶数学方程答案

【问题标题】：displaying latex math equations in web browser using mathjax and node.js使用 mathjax 和 node.js 在 Web 浏览器中显示乳胶数学方程
【发布时间】：2019-05-03 16:37:18
【问题描述】：

我正在尝试下载 node.js Mathjax 库并运行 GitHub 页面上提供的示例：https://github.com/mathjax/MathJax-node

我遵循的步骤：

第 1 步： mkdir mydemo

第 2 步： cd mydemo

第 3 步： npm install mathjax-node

第 4 步：从 GitHub 网站废弃示例 javascript 代码

// I place this in file ".\lib\main.js
// a simple TeX-input example
var mjAPI = require("mathjax-node");
mjAPI.config({
  MathJax: {
    // traditional MathJax configuration
  }
});
mjAPI.start();

var yourMath = 'E = mc^2';

mjAPI.typeset({
  math: yourMath,
  format: "TeX", // or "inline-TeX", "MathML"
  mml:true,      // or svg:true, or html:true
}, function (data) {
  if (!data.errors) {console.log(data.mml)}
});

第 5 步：我设置“.\index.html”来加载 mathjax 的 Javascript 演示代码。

<html>
    <head>
        <script src="./lib/main.js></script>
    </head>
    <body></body>
</html>

第 6 步：我将 index.html 加载到 chrome 网络浏览器中。没发生什么事。 :-(

当然，我对 javascript 和 node.js 的了解有点糟糕。但是，我做错了什么？为什么我在网络浏览器窗口中看不到“e=mc^2”的 mathjax 排版？

更新

好的，我的立场是正确的。它在命令行中的工作方式如下：

C:\mydemo> node .\lib\main.js

<math xmlns="http://www.w3.org/1998/Math/MathML" display="block" alttext="E = mc^2">
  <mi>E</mi>
  <mo>=</mo>
  <mi>m</mi>
  <msup>
    <mi>c</mi>
    <mn>2</mn>
  </msup>
</math>

我的问题是如何让这个 javascript 设置在 Web 浏览器中显示为我可以放在我的网站上的 Web 应用程序？而不是使用“node”命令从 Windows 命令行运行它？

如果我将节点脚本生成的 mathml 代码废弃到 html 文档中，则会出现另一个问题，它仍然没有使用正确的类型设置来显示“e=mc^2”。示例：

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
    
    <math xmlns="http://www.w3.org/1998/Math/MathML" display="block" alttext="E = mc^2">
  <mi>E</mi>
  <mo>=</mo>
  <mi>m</mi>
  <msup>
    <mi>c</mi>
    <mn>2</mn>
  </msup>
</math>

    </body>
</html>

看到格式很丑...它甚至没有将“2”变成上标或其他乳胶漂亮的排版...

【问题讨论】：

Chrome 不支持 MathML，所以你需要一个 polyfill。 MathJax 可以呈现 Presentation 和 Content MathML；请参阅docs.mathjax.org/en/latest/mathml.html 的相关文档。

标签： node.js npm latex mathml

【解决方案1】：

更简单...保留在 mathjax 中：

第 1 步：

mkdir demo1
cd demo1

第 2 步：将 mathjax javascript 库的本地副本下载到 demo1 目录

npm i mathjax

第 3 步：

在 demo1 目录下创建 index.html 文件：

<!DOCTYPE html>
<html>
<head>

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]}
  });
</script>
<script type="text/javascript" src="./node_modules/mathjax/MathJax.js?config=TeX-AMS_HTML-full"></script>

</head>
<body>

<p>
When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
</p>

</body>
</html>

【讨论】：

【解决方案2】：

部分答案是 web 浏览器也不支持 mathml ......它是一个 polyfill 功能。如果你添加这个丑陋的标题，它可以在 chrome 中工作：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html  PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN"
  "http://www.w3.org/Math/DTD/mathml2/xhtml-math11-f.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <meta charset="utf-8">
  <title>Fullest MathML support using MathJax</title>

  <!-- MATHML POLYFILL FOR WEB BROWSERS NOT SUPPORTING MATHML NATIVELY.. -->
  <script>window.MathJax = { MathML: { extensions: ["mml3.js", "content-mathml.js"]}};</script>
<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=MML_HTMLorMML"></script>

</head>
<body>
 <math xmlns="http://www.w3.org/1998/Math/MathML" display="block" alttext="E = mc^2">
  <mi>E</mi>
  <mo>=</mo>
  <mi>m</mi>
  <msup>
    <mi>c</mi>
    <mn>2</mn>
  </msup>
</math>

</body>

【讨论】：