-
Notifications
You must be signed in to change notification settings - Fork 209
A first usable demo (using webpack)
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.
$ git clone --branch alpha https://github.com/mathjax/mathjax-v3.git && cd mathjax-v3
$ npm install
Note: NodeJS v6 or later is required for building a distribution.
$ npm install webpack
Note: tested with webpack v3.6.0.
$ npx tsc
Note: npx is part of npm v5.2.0 and above.
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');
});
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");
}
)
]
};
$ npx webpack
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>≠</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>−</mo>
<mi>b</mi>
<mo>±</mo>
<msqrt>
<msup>
<mi>b</mi>
<mn>2</mn>
</msup>
<mo>−</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>
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.