Skip to content

A first usable demo (using webpack)

Jump to bottom
Peter Krautzberger edited this page Sep 8, 2017 · 12 revisions

As per the 2017-09 TC meeting, here's a quick start guide for building a first demo with v3.

First, clone the repo

$ git clone [email protected]:mathjax/mathjax-v3.git

Next, install the dependencies (i.e., typescript)

$ npm install

and compile typescript to JavaScript

$ npx tsc

Now install webpack 3 and the latest uglify plugin (since I had trouble with the built-in one)

$ npm install webpack [email protected]

Create your first demo file main.js

// the main thing
const MathJax = require("./mathjax3/mathjax.js").MathJax
// handler for HTML documents
require("./mathjax3/handlers/html.js");
// MathML input
const MathML = require("./mathjax3/input/mathml.js").MathML;
// HTML output
const CHTML = require("./mathjax3/output/chtml.js").CHTML;

// initiliaze mathjax with the document
const html = MathJax.document(document, {
    InputJax: new MathML(),
    OutputJax: new CHTML()
});

// simple loader + timer
window.addEventListener("load", function () {
    console.time('wrapper');
    // process the document
    html.findMath()
        .compile()
        .getMetrics()
        .typeset()
        .updateDocument();
    console.timeEnd('wrapper');
});

Now we create a simple webpack configuration webpack-config.js:

const Uglify = require("uglifyjs-webpack-plugin");

module.exports = {
    entry: './main.js',
    output: {
        path: __dirname,
        filename: 'dist.js'
    },
    plugins: [
        new Uglify()
    ]
};

and run webpack

$ npx webpack

now create your webpage

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Testing MathJax v3 setup</title>
  <script src="dist.js"></script>
</head>
<body>
  <p>
    When
    <math xmlns="http://www.w3.org/1998/Math/MathML">
      <mi>a</mi>
      <mo>&#x2260;</mo>
      <mn>0</mn>
    </math>, there are two solutions to
    <math xmlns="http://www.w3.org/1998/Math/MathML">
      <mi>a</mi>
      <msup>
        <mi>x</mi>
        <mn>2</mn>
      </msup>
      <mo>+</mo>
      <mi>b</mi>
      <mi>x</mi>
      <mo>+</mo>
      <mi>c</mi>
      <mo>=</mo>
      <mn>0</mn>
    </math>
    and they are
    <math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
      <mi>x</mi>
      <mo>=</mo>
      <mrow>
        <mfrac>
          <mrow>
            <mo>&#x2212;</mo>
            <mi>b</mi>
            <mo>&#x00B1;</mo>
            <msqrt>
              <msup>
                <mi>b</mi>
                <mn>2</mn>
              </msup>
              <mo>&#x2212;</mo>
              <mn>4</mn>
              <mi>a</mi>
              <mi>c</mi>
            </msqrt>
          </mrow>
          <mrow>
            <mn>2</mn>
            <mi>a</mi>
          </mrow>
        </mfrac>
      </mrow>
      <mtext>.</mtext>
    </math>
  </p>
</body>
</html>

And open it in your browser of choice.

Clone this wiki locally