MathJax and Browserify/Webpack/JSPM

[uriel....@saplinglearning.com]

Basically, instead of including MathJax via a script tag, I want to include mathjax the modern way via an "import/require" way.

This has some advantages (the main mathjax file can be bundled with the app; mathjax doesn't receive special treatement---it's just another module; etc).

In JSPM/Webpack/Browserify, you can configure your app to include mathjax via "import/require".

However, the problem that I'm having is that MathJax then tries to load all it's files relative to the app root instead of loading them wherever the package manager installed them.

For example, in JSPM, when you "jspm install github:mathjax/MathJax", MathJax is installed in "jspm_packages/github/mathjax/Mat...@v2.4-latest". In the code, you can do "import {MathJax} from "mathjax/MathJax" and this works.

The problem is that as soon as you do something like the following, it'll try to load everything relative to the app root and not where it's actually located. Is there a way to specify the MathJax URL location?

MathJax.Hub.Config({

        extensions: ['TeX/cancel.js', 'TeX/mhchem.js'],

        tex2jax: {inlineMath: [['$$', '$$'], ['\\\\(', '\\\\)'], ['\\(', '\\)']]},

        processUpdateDelay: 0,

        processUpdateTime: 0,

        showProcessingMessages: false,

        jax: ['input/TeX', 'output/HTML-CSS'],

        displayAlign: 'left',

        displayIndent: '2.2em',

        showMathMenu: true,

        'HTML-CSS': {

          availableFonts: ['STIX', 'TeX'],

          preferredFont: 'STIX',

          webFont: 'STIX-Web',

          undefinedFamily: 'STIXGeneral, \'Arial Unicode MS\', serif'

        }

      });

[Peter Krautzberger]

Hi,

MathJax is not compatible with current module approaches like CommonJS. We'll be working on that next year as part of a larger overhaul, i.e., MathJax v3.0.

The best you can do right now is first to build a single-file version of MathJax (which requires some manual work) and work with that.

Regards,

Peter.

--
You received this message because you are subscribed to the Google Groups "MathJax Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-user...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Uriel Avalos]

You're not listening to what I said...is there a way to specify the mathjax base url? That would go a long way...

[Peter Krautzberger]

Hi,

Yes, that's possible, https://github.com/mathjax/MathJax/blob/master/unpacked/MathJax.js#L671

Regards,

Peter.

On Thu, Dec 3, 2015 at 4:45 PM, Uriel Avalos <uriel....@saplinglearning.com> wrote:

You're not listening to what I said...is there a way to specify the mathjax base url? That would go a long way...

--

[Davide P. Cervone]

I think you mean line 670 not 671.  Using

MathJax.Hub.Config({root: "path-to-mathjax"});

should do the trick (where path-to-mathjax is replaced by the actual URL you want to use).  Note that the Ajax value will be taken from the main configuration, so no need to set the Ajax config directly.

Davide

[uriel....@saplinglearning.com]

Is there a way to set root/path inline? I just did the following and that did not work.

MathJax.Hub.Config({
   path: 'foo',
   root: 'bar'
})

[Peter Krautzberger]

> I think you mean line 670 not 671.

Thanks for catching that!

P.

[uriel....@saplinglearning.com]

Ah... I'm using 2.4. That override is for 2.5

[uriel....@saplinglearning.com]

For posterity, in 2.4, it's the following (and apologies to Krautzberger if I may have come off rude --- I'm just terse)

mjax.Ajax.config.root = 'foo';

[Peter Krautzberger]

No worries -- PK.

[Davide P. Cervone]

Peter was right, you do have to set the Ajax version (the root is copied from the main configuration only if it is loaded in the usual way -- sorry about that).

The usual mechanism for in-line configuration is to include

<script type="text/x-mathjax-config">

MathJax.Hub.Config({Ajax: {root: "jspm_packages/github/mathjax/Mat...@v2.4-latest"}});

</script>

placed BEFORE the script that loads MathJax.js.  In your case, since MathJax.js is loaded dynamically, this should be included before that occurs.

Alternatively, you can use

<script>

MathJax = {

  Ajax: {root: "jspm_packages/github/mathjax/Mat...@v2.4-latest"}

};

</script>

again before MathJax.js is loaded.

Note that you should NOT set "path" (which is something different, and is supposed to be an array, so setting it to a string may have adverse consequences).  Also, the configuration of root is not 2.5-specific, but the path variable may have come in 2.5 (I didn't check to see).

Davide

[carte...@gmail.com]

I am switching from requirejs to webpack, and have been having issues with MathJax as you describe.

My webpack.config.js looks something like this

module.exports = {

    resolve: {

        modulesDirectories: ['.', 'public/modules'],

        alias : {

            'MathJax' : 'bower_components/MathJax/MathJax.js'

        }

    },

    module: {

        loaders: [

            // expose MathJax as a global, which is actually the configuration only at this point

            { test: /MathJaxConfig\.js/, loader: "expose?MathJax" },

            // the import is just to get MathJaxConfig to go into the global

            { test: /MathJax\.js/, loader: "imports?MathJaxConfig!exports?MathJax" },

        ]

    },

    entry: "./public/index.js",

    output: {

        path: __dirname + "/dist",

        filename: "index.js"

    }

};

And then my MathJaxConfig.js file looks like this

module.exports = {

    delayStartupUntil : "configured",

    skipStartupTypeset: true,

    extensions: ["tex2jax.js"],

    jax: ["input/TeX", "output/HTML-CSS"],

    tex2jax: {

      inlineMath: [ ['$','$'], ["\\(","\\)"] ],

      displayMath: [ ['$$','$$'], ["\\[","\\]"] ],

      processEscapes: true

    },

    "HTML-CSS": { availableFonts: ["TeX"] },

    AuthorInit : function() {

        MathJax.Ajax.config.root = "MathJax";

        MathJax.Hub.Configured();

    }

};

Where I have to set MathJax.Ajax.config.root directly in the AuthorInit function.

I did try the following, which was my first guess based on the above answers and makes the most sense to me.

dontWorkMathJaxConfig.js

module.exports = {

    // configure Ajax path with configuration

    Ajax : { root : "MathJax"},

    skipStartupTypeset: true,

    extensions: ["tex2jax.js"],

    jax: ["input/TeX", "output/HTML-CSS"],

    tex2jax: {

      inlineMath: [ ['$','$'], ["\\(","\\)"] ],

      displayMath: [ ['$$','$$'], ["\\[","\\]"] ],

      processEscapes: true

    },

    "HTML-CSS": { availableFonts: ["TeX"] }

};

...but it doesn't work for some reason.