@springernature/mathjax-config

mathjax-config

MathJax takes inline MathML, TeX and ASCIImath code, and transform it into high-quality scalable equations.

This repo contains configurations and setup scripts for enabling Mathjax on Springer Nature content delivery platforms.

Usage

Including this script in your site will load Mathjax from a CDN, load the included SN configuration options, and apply Mathjax to any inline equations on your page.

Expected HTML

There's no need for specially-formatted HTML. Once loaded, Mathjax will look for inline-equations in the form of:

<p>This is normal text \({}^{132}\hbox {Xe}\). And more normal text.</p>

or

<h1>This is normal text \({-\Delta(-\Delta u+W^{\prime}(u))+W^{\prime\prime}(u)(-\Delta u+W^{\prime}(u))=0}\) and more normal text.</h1>

Installation via npm

mathjax-config is published as a package on npm.

To install via npm:

$ npm install @springernature/mathjax-config --save

or with Yarn:

$ yarn add @springernature/mathjax-config

In your Javascript file import the module.

In ES6 syntax:

import MathJaxConfig from '@springernature/mathjax-config';

In ES5 syntax:

const MathJaxConfig = require('@springernature/mathjax-config');

Then initialise the module:

MathJaxConfig.loadMathJaxAsync();

The main MathJax library will now be loaded asynchronously from a CDN and will convert any inline equations it finds on the page.

To lazy load, waiting until the user is approaching an equation, initialise passing in a selector for matching the elements that should be rendered using MathJax:

MathJaxConfig.lazyLoadMathJaxAsync(null, 'math,span.mathjax-tex');

Both loadMathJaxAsync and lazyLoadMathJaxAsync allow config properties to be overridden.

For example:

MathJaxConfig.lazyLoadMathJaxAsync({menuSettings: {zoom: 'None'}}, 'math,span.mathjax-tex');

or

MathJaxConfig.loadMathJaxAsync({menuSettings: {zoom: 'None'}});

would override the default zoom property of the menuSettings in the MathJax config.

If you add content to your page after MathJax has been run equations within that content won't be rendered. You can call

MathJaxConfig.loadMathJaxForDeferredContent(element);

to render them (and load MathJax if it wasn't already available on your page)

Installation via Browserify

Check the examples directory for how to include this package to your project using node-browserify.

To run the example, run:

npm run browserify-example

This will generate a main.js file. Then just open example.html on your browser to see MathJax in action.