Reputation: 1910

displaying latex math equations in web browser using mathjax and node.js

I'm trying to download node.js Mathjax library and run example provide on GitHub page: https://github.com/mathjax/MathJax-node

The steps I've followed:

Step 1: mkdir mydemo

Step 2: cd mydemo

Step 3: npm install mathjax-node

Step 4: Scrap example javascript code from GitHub website

// 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)}
});

Step 5: I setup ".\index.html" to load Javascript demo code for mathjax.

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

Step 6: I load index.html into chrome web browser. nothing happens. :-(

Granted, my knowledge of javascript and node.js kind of sucks. But, what did I do wrong? why cant I see mathjax typesetting of "e=mc^2" in web browser window?

UPDATE

Ok, I stand corrected. It works from the command line as follows:

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>

My Question is how to get this javascript setup to display in a web browser as a web application that I can put on my website? instead of running it from Windows command line using "node" command?

Then there's the other problem if I scrap the mathml code generated by the node script into an html document, it still doesn't use the correct type setting to display the "e=mc^2". example:

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

See the formatting is ugly... it didn't even turn the "2" into a superscript or other latex-nice typesetting...

Upvotes: 2

Answers (2)

pico

Reputation: 1910

Even Easier... keep it in mathjax:

Step 1:

mkdir demo1
cd demo1

Step 2: Download a local copy of mathjax javascript library to demo1 directory

npm i mathjax

Step 3:

create index.html file in demo1 directory:

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

Upvotes: 1

pico

Reputation: 1910

Part of the answer is that mathml isn't supported in web browsers either... its a polyfill feature. if you add this ugly header it works in 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>

Upvotes: 0

displaying latex math equations in web browser using mathjax and node.js

Answers (2)

Related Questions