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

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

1 голос
/ 03 мая 2019

Я пытаюсь скачать библиотеку 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" в окне веб-браузера?

UPDATE

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

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 с помощью команды "узел"?

Тогда есть другая проблема, если я собираю код 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>

enter image description here

Видите, форматирование уродливо ... оно даже не превратило "2" в верхний индекс или другую приятную на латексный набор ... ... 1051 *

Ответы [ 2 ]

0 голосов
/ 03 мая 2019

Еще проще ... держите в 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>
0 голосов
/ 03 мая 2019

Отчасти ответ заключается в том, что mathml также не поддерживается в веб-браузерах ... это функция полизаполнения.если вы добавите этот уродливый заголовок, он будет работать в 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>

enter image description here

...