MathJax in Ionic

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

Now I get the point. thanks for sharing.

I can’t make it work.

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/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

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.

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

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

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

IMG_20180827_234814

Something like that or
$P = mRT$

Somehow this isn’t working for me. I have tried many things like

$P = mRT$

or

$a^2$

but it isn’t rendering :disappointed:
Anyway thank you for your effort.

Hi, how do you to equation render fine in ngLoop ?

`import {Directive, ElementRef, Input} from ‘@angular/core’;

@Directive({
selector: ‘[MathJax]’
})
export class MathJaxDirective {
@Input(‘MathJax’) MathJaxInput: string;
constructor(private el: ElementRef) {
}

ngOnChanges() {
this.el.nativeElement.innerHTML = this.MathJaxInput;
eval(‘MathJax.Hub.Queue([“Typeset”,MathJax.Hub, this.el.nativeElement])’);
}
}`