Replacing Learnosity's MathJax With Your Own – Learnosity Product & Developer Help

This article describes how to load your own MathJax library with custom configuration. This might be required if you are already using MathJax in your app. Note that Learnosity currently provides both MathJax and MathQuill for rendering (more information here).

Starting with Long Term Support v2023.2.LTS and onward, MathJax v3.2.2 is bundled with and configured by the Questions API when a Question contains an is_math attribute that is set to true. For Long Term Support v2023.1.LTS and prior, MathJax v2.7.0 is loaded.

If you must define MathJax yourself, e.g. when rendering math on non-Learnosity elements with some special configuration or rules; you should follow this integration guide, and double check that compatibility with Learnosity elements is ensured. For Long Term Support v2023.2.LTS and onward, we support customers loading either MathJax v3.2 or MathJax v2.7. However for Long Term Support v2023.1.LTS and prior, we only recommend customers loading MathJax v2.7. Note that the internal structure of MathJax version 3 is significantly different from that of version 2. See MathJax version 3 documentation for more information.

When the Learnosity MathJax loader finds out that the MathJax library is already loaded (if the window.MathJax property exists), it won't load anything, but instead rely on whatever is already loaded to render Learnosity math content.

Questions API is able to work with an external MathJax library, for example, one loaded from a Content Distribution Network CDN (see the MathJax CDN guide) or from your own server. To fully take advantage of this, you should follow the guidelines listed below:

Loading order. Load and configure MathJax before initializing the Questions API (see the official guide for Version 3 and Version 2) as Learnosity won't reload Questions API if a running instance of it is detected.
Auto-loading. We use the 'autoload-all' extension. MathJax has a smart way to autoload needed extensions when first used. You can read more about it here. If you don't want to use the MathJax autoloader, make sure you list all the necessary extensions, instead.
```
extensions: ["autoload-all.js"]
```

Mandatory macros. Make sure you include these macros in the TeX config, to be fully compatible with the Learnosity MathQuill input engine.

For Mathjax Version 2.x.x:

Macros:{
    /*
    Converting MathQuil's \abs to pipe TeX Command
    http://www.onemathematicalcat.org/MathJaxDocumentation/TeXSyntax.htm#pipeSymbol    For more information about Macros go to    https://docs.mathjax.org/en/v2.7-latest/tex.html#defining-tex-macros
    */
    abs:['{|#1|}',1],
    degree:['°'],    
    longdiv:['{\\enclose{longdiv}{#1}}',1],    
    atomic:['{_{#1}^{#2}}',2],    
    polyatomic:['{_{#2}{}^{#1}}',2],   
    circledot:['{\\odot}'],    
    parallelogram:['\\unicode{x25B1}'],    
    ngtr:['\\unicode{x226F}'],    
    nless:['\\unicode{x226E}'],   
    MathQuillVarField:['#1',1]

}

For Mathjax Version 3.x.x:

macros:{
    /*
    Converting MathQuil's \abs to pipe TeX Command
    http://www.onemathematicalcat.org/MathJaxDocumentation/TeXSyntax.htm#pipeSymbol    For more information about Macros go to    https://docs.mathjax.org/en/v2.7-latest/tex.html#defining-tex-macros
    */
    abs:['{|#1|}',1],
    degree:['°'],    
    longdiv:['{\\enclose{longdiv}{#1}}',1],    
    atomic:['{_{#1}^{#2}}',2],    
    polyatomic:['{_{#2}{}^{#1}}',2],   
    circledot:['{\\odot}'],    
    parallelogram:['\\unicode{x25B1}'],    
    ngtr:['\\unicode{x226F}'],    
    nless:['\\unicode{x226E}'],   
    MathQuillVarField:['#1',1],
    overarc:['{\\overparen{#1}}',1]    

}

Font-size boosting. Since Questions API v2.63.0, MathJax internal font-size boosting (using JS) has been switched off. This enabled full control over the font-size, and configuration using cascading style sheets (CSS). To switch off MathJax internal font-size boosting (using JS) in your MathJax instance, do the following in your MathJax configuration:

For Mathjax Version 2.x.x:
```
"HTML-CSS": {
    availableFonts: ["TeX"],
    minScaleAdjust: 100,
    matchFontHeight: false,
    imageFont: null
}
```
For Mathjax Version 3.x.x:
```
"chtml": {
    minScale: 1,
    matchFontHeight: false
}
```
Control math rendering. You should also add our "ignore math rendering" class to your tex2jax configuration in version 2.x.x or to your options section if you are using version 3.x.x

For Mathjax Version 2.x.x:
```
tex2jax: {
    ignoreClass: "lrn_noMath"
}
```
For Mathjax Version 3.x.x:
```
options: {
    enableMenu: false,
    ignoreHtmlClass: 'lrn_noMath'
}
```
Alternatively, if you need to scope LaTex rendering to Learnosity elements only, you will need to first add the class lrn_noMath to the body tag on your page, then have lrn as one of the process classes, i.e. your tex2jax configuration should resemble the following:

For Mathjax Version 2.x.x:
```
tex2jax: {
    ignoreClass: "lrn_noMath",
    processClass: "lrn"
}
```
For Mathjax Version 3.x.x:
```
options: {
    ignoreHtmlClass: 'lrn_noMath',
    processHtmlClass: "lrn"
}
```

Complete configuration example. Read the complete MathJax configuration code below.

For Mathjax Version 2.x.x:

MathJax.Hub.Config({
    messageStyle: "none",
    showMathMenu: false,
    tex2jax: {
        ignoreClass: "lrn_noMath"
    },
    jax: ["output/HTML-CSS"],
    TeX: {
        Macros: {
            /*
            Converting MathQuil's \abs to pipe TeX Command
            http://www.onemathematicalcat.org/MathJaxDocumentation/TeXSyntax.htm#pipeSymbol
            For more information about Macros go to
            https://docs.mathjax.org/en/v2.7-latest/tex.html#defining-tex-macros
            */
            abs: ['{|#1|}', 1],            
            degree: ['°'],            
            longdiv: ['{\\enclose{longdiv}{#1}}', 1],            
            atomic: ['{_{#1}^{#2}}', 2],            
            polyatomic: ['{_{#2}{}^{#1}}', 2],            
            circledot: ['{\\odot}'],           
            parallelogram: ['\\unicode{x25B1}'],           
            ngtr: ['\\unicode{x226F}'],            
            nless: ['\\unicode{x226E}'],            
            MathQuillVarField: ['#1', 1]
        }
    },
    "HTML-CSS": {
    availableFonts: ["TeX"],
        minScaleAdjust: 100,
        matchFontHeight: false,
        imageFont: null
    }
});

For Mathjax Version 3.x.x:

window.MathJax = {
    options: {
        enableMenu: "false",
        ignoreHtmlClass: "lrn_noMath"
    },
    tex: {
        inlineMath: [['\\(', '\\)'], ['$$', '$$']],
        displayMath: [['\\[', '\\]']],
        macros: {
            /*
            Converting MathQuil's \abs to pipe TeX Command
            http://www.onemathematicalcat.org/MathJaxDocumentation/TeXSyntax.htm#pipeSymbol
            For more information about Macros go to
            https://docs.mathjax.org/en/v2.7-latest/tex.html#defining-tex-macros
            */
            abs: ['{|#1|}', 1],
            degree: ['°'],
            longdiv: ['{\\enclose{longdiv}{#1}}', 1],
            atomic: ['{_{#1}^{#2}}', 2],
            polyatomic: ['{_{#2}{}^{#1}}', 2],
            circledot: ['{\\odot}'],
            parallelogram: ['\\unicode{x25B1}'],
            ngtr: ['\\unicode{x226F}'],
            nless: ['\\unicode{x226E}'],
            MathQuillVarField: ['#1', 1],
            overarc: ['{\\overparen{#1}}', 1]
       }
    },
    chtml: {
        minScale: 1,
        matchFontHeight: false,
    }
};

Demo. You can check our working example here.

Related articles