отображение латексных математических уравнений в веб-браузере с использованием mathjax и node.js

Я пытаюсь загрузить библиотеку node.js Mathjax и запустить пример на странице GitHub: https://github.com/mathjax/MathJax-node

Шаги, которые я выполнил:

Шаг 1. mkdir mydemo

Шаг 2: cd mydemo

Шаг 3. npm установите mathjax-node

Шаг 4. Удалите пример кода JavaScript с веб-сайта GitHub.

// 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 для загрузки демонстрационного кода Javascript для mathjax.

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

Шаг 6. Я загружаю index.html в браузер Chrome. Ничего не произошло. :-(

Конечно, мои познания в javascript и node.js - отстой. Но что я сделал не так? Почему я не вижу набор mathjax e = mc ^ 2 в окне веб-браузера?

ОБНОВЛЕНИЕ

Хорошо, я поправился. Он работает из командной строки следующим образом:

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 для отображения в веб-браузере в виде веб-приложения, которое я могу разместить на своем веб-сайте? вместо того, чтобы запускать его из командной строки Windows с помощью команды узла?

Тогда есть другая проблема, если я перенесу математический код, сгенерированный скриптом узла, в 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 в надстрочный индекс или другой латексный набор текста ...


node.js npm latex mathml
person pico    schedule 03.05.2019    source источник
comment
Chrome не поддерживает MathML, поэтому вам понадобится полифилл. MathJax может отображать как презентацию, так и контент MathML; см. соответствующую документацию на странице docs.mathjax.org/en/latest/mathml.html.   -  person pico    schedule 03.05.2019

Ответы (2)


arrow_upward
1
arrow_downward

Еще проще ... сохраните его в mathjax:

Шаг 1:

mkdir demo1
cd demo1

Шаг 2. Загрузите локальную копию библиотеки javascript mathjax в каталог demo1.

npm i mathjax

Шаг 3:

создать файл index.html в каталоге demo1:

<!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>
person pico    schedule 03.05.2019

arrow_upward
0
arrow_downward

Частично ответ заключается в том, что mathml также не поддерживается в веб-браузерах ... это функция полифила. если вы добавите этот уродливый заголовок, он будет работать в хроме:

<?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>

введите описание изображения здесь

person pico    schedule 03.05.2019