MathJax

MathJax in Meteor. Configurable with extensions.

Table of Contents

• Install
• Usage
• Configuration
  • Script Choice
  • MathJax Configuration
  • Caching Content
  • Extensions
  • Equation Numbering
  • Typesetting Callbacks
  • Pre-loading

Install

This is available as convexset:mathjax on Atmosphere. (Install with meteor add convexset:mathjax.)

If you get an error message like:

WARNING: npm peer requirements not installed:
 - package-utils@^0.2.1 not installed.
          
Read more about installing npm peer dependencies:
  http://guide.meteor.com/using-packages.html#peer-npm-dependencies

It is because, by design, the package does not include instances of these from npm to avoid repetition. (In this case, meteor npm install --save package-utils will deal with the problem.)

See this or this for more information.

Now, if you see a message like

WARNING: npm peer requirements not installed:
underscore@1.5.2 installed, underscore@^1.8.3 needed

it is because you or something you are using is using Meteor's cruddy old underscore package. Install a new version from npm. (And, of course, you may use the npm version in a given scope via require("underscore").)

Usage

So...

Standard display math:
{{#mathjax}}
  $$
    \|x\|\|y\| \ge x^{T}y
  $$
{{/mathjax}}

This can be used to generate numbered equations:
{{#mathjax}}
  \begin{equation}
    \|x\|\|y\| \ge x^{T}y
  \end{equation}
{{/mathjax}}

Inline math is as easy as {{#mathjax}}$\alpha\beta\gamma${{/mathjax}}.

Configuration

Script Choice

Set the script to load at MathJaxHelper.script before the first use. A list of script load URLs (served from the CDN) can be found at MathJaxHelper.SCRIPT_SRC.

MathJax Configuration

Set the configuration to use at MathJaxHelper.config before the first use. Call MathJaxHelper.useDefaultConfig() to use the default configuration. Default configuration:

{
    tex2jax: {
        inlineMath: [
            ['$', '$'],
            ["\\(", "\\)"]
        ],
        displayMath: [
            ['$$', '$$'],
            ["\\[", "\\]"]
        ],
    },
    TeX: {
        extensions: [
            "AMSmath.js",
            "AMSsymbols.js",
        ],
        equationNumbers: {
            autoNumber: "AMS"
        },
    },
    skipStartupTypeset: true,
    processEscapes: true,
    showProcessingMessages: true,
    messageStyle: "normal",
}

Caching Content

Set MathJaxHelper.cacheResults to true to cache the results of typesetting. (Default: false)

Call MathJaxHelper.clearCache() to clear the cache.

Use MathJaxHelper.cacheSize to set the cache size.

Extensions

Call MathJaxHelper.useExtensions(arrayOfExtensions) to select a list of extensions to use. (See this for more information.)

Items from the MathJax third-party extensions repository can be loaded by name (e.g.: "xyjax" and "img") instead of by the full URL (e.g.: "http://sonoisa.github.io/xyjax_ext/xypic.js").

For a list of extensions from the MathJax third-party extensions repository may be found in MathJaxHelper.MATHJAX_CONTRIB_EXTENSIONS_LIST. Currently, this list is:

[
    "counters", "everymath", "forloop", "forminput",
    "img", "knowl", "longdiv", "modifymenu", "physics",
    "preamble", "siunitx", "sqrtspacing", "toggles", "xyjax"
]

Equation Numbering

To reset equation numbers: MathJaxHelper.resetEquationNumbers() (Easy, right?)

Typesetting Callbacks

To add a callback to be executed before typesetting, call: MathJaxHelper.addPreTypesettingCallback(callbackFunction)

Callback functions are called with a single argument of the form

{
    cacheKey: cacheKey,  // if the cache is used
    originalText: originalNodeContent,
    node: node
}

To add a callback to be executed after typesetting, call: MathJaxHelper.addPostTypesettingCallback(callbackFunction)

Callback functions are called with a single argument of the form

{
    cacheKey: cacheKey,  // if the cache is used
    originalText: originalNodeContent,
    fromCache: true,  // ... or false, depending on whether there was a cache hit
                      // available if the cache is used
    node: node
}

Pre-loading

Here is a useful way to preload things:

Meteor.startup(function() {
    MathJaxHelper.onMathJaxReady(function(MathJax) {
        // Warm Up the type setter
        var div = document.createElement('div');
        div.innerHTML = "$x$";
        MathJax.Hub.Queue(["Typeset", MathJax.Hub, div], function() {
            console.info("MathJax loaded.");
        });
    });
});