How to use MathJax (mathematical equations rendering library) MathJax in Ionic 2 Application both in offline and CDN way.
MathJax in Ionic
I was also looking how to include the http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=MML_HTMLorMML
I was able to include it, but the problem is my app users have to manually refresh the view in order for the equations to display correctly.
I have been googling âIntegrating MathJax in ionic 3 offlineâ for last 2 days. All I found that is I have to use a directive to achieve that. But this approach is not fast for such an app which has lots of mathematical equation. So I came up with another solution:

download MathJax offline file from here, extract and rename that with MathJax and place the whole folder in src/assets folder of your ionic app.

add the code given below in the head section of index.html file
<script type="text/xmathjaxconfig"> MathJax.Hub.Config({ imageFont: null, extensions: ["tex2jax.js"], jax: ["input/TeX","output/HTMLCSS"], tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]} }); </script> <script type="text/javascript" async src="assets/MathJax/MathJax.js"> </script>

now for every page where you want to load mathematical equation, just paste the code below.
ionViewDidEnter() { eval('MathJax.Hub.Queue(["Typeset", MathJax.Hub])'); }
By doing these three steps you will have integrated MathJax successfully.
But the problem is the size of MathJax folder is so big. You can reduce the size up to 3mb by just having the following directories and files

MathJax.js

extensions

fonts

HTMLCSS

TeX
 eof
 otf
 svg

jax

element

input
 TeX

output
 HTMLCSS
 autoload
 config.js
 fonts
 TeX
 imageFonts.js
 jax.js
 HTMLCSS
Donât ever put anything under www
, only under src
. www
belongs to the build system.
Thanks a lot for posting this, am gonna give it a try now.
First of all, I am new to ionic. I have placed MathJax to www/assets and built for Android , tested that app on a real device. That worked.
After reading your comment I placed MathJax to src/assets. That worked too.
What is the difference? Or, is there something that I need to understand?
If youâre familiar with a typical UNIX/C makefile build process, think of www
as the object code directory. Itâs used by the build system, and its contents can be blown away and regenerated at any time ionicappscripts wants to. src
is where you make changes, and they are reflected in www
.
Now I get the point. thanks for sharing.
Have you copied and pasted correctly? you have to paste the second snippet of code in your every page.
I used asciimath
<script type="text/xmathjaxconfig">
MathJax.Hub.Config({
extensions: ["asciimath2jax.js"],
asciimath2jax: {
delimiters: [['$','$'], ['`', '`']]
}
});
</script>
<script type="text/javascript" async
src="assets/MathJax/Mathjax.js?config=AM_HTMLorMMLfull">
</script>
I have the equations solving in a *ngFor loop. I have equations in one page. I have put the mathjax in the assets
in the output HTMLCSS the 'TeX file is missing.
Before you start cleaning, I advise, download the MathJax from the link he gave above and extract it in the asset folder like that(63~MB), then when everything is working fine, you can start cleaning.
Will you please show me the codes i need to copy if im going to use AsciiMath? the one you provided was for Tex right?
Sorry Iâm new to Ionic. I have to put the second code snippet into the
export class pagename{ }
in the .ts file of my page right?
Then I get the error âMathJax is not definedâ
also Iâm not shure what I have to write in my HTML file so that it gets rendered by mathjax.
Could you please help me with this issue? Thank you.
Sometimes mine shows that too âMathJax not definedâ but itâs working. Iâll just close the error dialog.
Place this in the head of your index.html
<script type="text/xmathjaxconfig">
MathJax.Hub.Config({
extensions: ["asciimath2jax.js"],
asciimath2jax: {
delimiters: [['$','$'], ['`', '`']]
}
});
</script>
<script type="text/javascript" async
src="assets/MathJax/Mathjax.js?config=AM_HTMLorMMLfull">
</script>
Place the information you want to render as MathJax in between $ $ or basically the delimiters.
Thank you for the quick answer.
I pastet the code snippet in the head of /src/index.html not /www/index.html
and the ts file of the page looks like this:
import { Component } from '@angular/core';
import { NavController } from 'ionicangular';
@Component({
selector: 'pagehome',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController) {
}
ionViewDidEnter() {
eval('MathJax.Hub.Queue(["Typeset", MathJax.Hub])');
}
}
but when I close the error dialogue âMathJax is not definedâ mahjax is not rendering.
If you still have ideas to fix my problem please share them with me. Thank you