Skip to content

A first usable demo (using webpack)

Jump to bottom
Davide P. Cervone edited this page Sep 19, 2018 · 12 revisions

Update check out https://github.com/mathjax/mj3-demos for pre-build distributions.

Here's a quick start guide for building a first demo with v3.

If you have questions, please file an issue.

1. clone the repo and change directory

$ git clone --branch alpha https://github.com/mathjax/mathjax-v3.git && cd mathjax-v3

2. install dependencies

$ npm install

Note: NodeJS v6 or later is required for building a distribution.

3. install webpack

$ npm install webpack

Note: tested with webpack v3.6.0.

4. compile TypeScript to JavaScript

$ npx tsc

Note: npx is part of npm v5.2.0 and above.

5. create test.js

A basic setup to convert client-side (with some timing code).

// the MathJax core
const MathJax = require("./mathjax3/mathjax.js").MathJax
// MathML input
const MathML = require("./mathjax3/input/mathml.js").MathML;
// HTML output
const CHTML = require("./mathjax3/output/chtml.js").CHTML;
// Use browser DOM
const adaptor = require("./mathjax3/adaptors/browserAdaptor").browserAdaptor();
// Register the HTML document handler
require("./mathjax3/handlers/html.js").RegisterHTMLHandler(adaptor);


// initialize mathjax with with the browser DOM document; other documents are possible
const html = MathJax.document(document, {
    InputJax: new MathML(),
    OutputJax: new CHTML({
        fontURL: 'https://cdn.rawgit.com/mathjax/mathjax-v3/3.0.0-alpha.4/mathjax2/css/'
    })
});

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

6. configure webpack

Create a simple webpack configuration webpack.config.js:

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

module.exports = {
    entry: './test.js',
    output: {
        path: __dirname,
        filename: 'dist.js'
    },
    plugins: [
        new Uglify({
            uglifyOptions: {
                ie8: true
            }
        }),
        new webpack.NormalModuleReplacementPlugin(
            /AsyncLoad\.js/,
            function (resource) {
                resource.request = resource.request.replace(/AsyncLoad/,"AsyncLoad-disabled");
            }
        )
    ]
};

7. run webpack

$ npx webpack

8. create your sample page.

Finally!

<!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="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
  <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>

9. done!

Open the page in your browser of choice.

You can check the browser console for the timer result and run a performance profile to dig deeper.

Clone this wiki locally