MathJax in Ionic

Ionic Framework ionic-v3
1

How to use MathJax (mathematical equations rendering library) MathJax in Ionic 2 Application both in offline and CDN way.

2

I was also looking how to include the http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=MML_HTMLorMML

3

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.

4

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:

  1. 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.

  2. add the code given below in the head section of index.html file

     <script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    imageFont: null,
    extensions: ["tex2jax.js"],
    jax: ["input/TeX","output/HTML-CSS"],
    tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]}
  });
  </script>
  <script type="text/javascript" async
          src="assets/MathJax/MathJax.js">
  </script>

  3. 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

  • HTML-CSS

  • TeX

    • eof
    • otf
    • svg

  • jax

  • element

  • input

    • TeX

  • output

    • HTML-CSS
      • autoload
      • config.js
      • fonts
        • TeX
      • imageFonts.js
      • jax.js
3 Likes
5

Don’t ever put anything under www, only under src. www belongs to the build system.

6

Thanks a lot for posting this, am gonna give it a try now.

7

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?

8

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 ionic-app-scripts wants to. src is where you make changes, and they are reflected in www.

9

Now I get the point. thanks for sharing.

10

I can’t make it work.

11

Have you copied and pasted correctly? you have to paste the second snippet of code in your every page.

12

I used asciimath

<script type="text/x-mathjax-config">
      MathJax.Hub.Config({
          extensions: ["asciimath2jax.js"],
          asciimath2jax: {
               delimiters: [['$','$'], ['`', '`']]
          }
      });
</script>

<script type="text/javascript" async
    src="assets/MathJax/Mathjax.js?config=AM_HTMLorMML-full">
</script>
1 Like
13

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 HTML-CSS the 'TeX file is missing.

14

What do you have in you MathJax folder? you can download my Mathjax folder from here

15

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.

16

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?

17

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.

18

Sometimes mine shows that too ‘MathJax not defined’ but it’s working. I’ll just close the error dialog.

19

Place this in the head of your index.html

<script type="text/x-mathjax-config">
      MathJax.Hub.Config({
          extensions: ["asciimath2jax.js"],
          asciimath2jax: {
               delimiters: [['$','$'], ['`', '`']]
          }
      });
</script>

<script type="text/javascript" async
    src="assets/MathJax/Mathjax.js?config=AM_HTMLorMML-full">
</script>

Place the information you want to render as MathJax in between $ $ or basically the delimiters.

20

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 'ionic-angular';

@Component({
  selector: 'page-home',
  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