Skip to content

A first usable demo (using webpack)

Jump to bottom
Peter Krautzberger edited this page Oct 26, 2017 · 12 revisions

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

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

2. grab a recent branch

$ git checkout stretchy-cells

Note: check for newer branches or wait until all code review is done.

3. install dependencies

$ npm install

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

4. install webpack

$ npm install webpack

Note: tested with webpack v3.6.0.

5. compile TypeScript to JavaScript

$ npx tsc

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

6. create main.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;

// handler for HTML documents
const HTMLHandler = require("./mathjax3/handlers/html/HTMLHandler.js").HTMLHandler;
MathJax.handlers.register(new HTMLHandler());

// initialize mathjax with with a DOM document (e.g., browser, jsdom); other documents are possible
const html = MathJax.document(document, {
    InputJax: new MathML(),
    OutputJax: new CHTML()
});

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

7. configure webpack

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()
    ]
};

8. run webpack

$ npx webpack

9. 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="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>

10. 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.

Misc.

  • the HTML output expects fonts in ./mathjax2/css/ for now.
Clone this wiki locally