CODEWITHSUNDEEP
androidmathjaxtex
Abhijeet
Abhijeet

Reputation: 355

MathJax not rendering correctly

I am currently using this library in my app: https://github.com/kexanie/MathView which is used to convert text into maths, it uses TeX/MathJax.

This was working as expected:

MathView mv = new MathView(context, null);
        mv.setEngine(MathView.Engine.MATHJAX);
        mv.config("MathJax.Hub.Config({\n" +
                "jax: [\"input/TeX\",\"output/HTML-CSS\"],\n" +
                "displayAlign: \"left\"" +
                "});"
        );
        mv.setText(context.getString(id));

where "id" pointed to a resource in strings.xml file.

Now, I changed it to be contained inside a file, and getting it from there.

MathView mv = new MathView(context, null);
        mv.setEngine(MathView.Engine.MATHJAX);
        mv.config("MathJax.Hub.Config({\n" +
                "jax: [\"input/TeX\",\"output/HTML-CSS\"],\n" +
                "displayAlign: \"left\"" +
                "});"
        );
        String a= text;
        mv.setText(a);

where text is received from the file, but is same as the earlier one in strings.xml, I logged that to verify.

But now the output is broken. It doesn't recognise the text correctly "\frac{a}{b}" earlier used to be "a/b", now it is "fracab"

Is it a library issue?

Upvotes: 1

Views: 1077

Answers (1)

Priya Gupta
Priya Gupta

Reputation: 39

I have used MathJax in angular4 project. It might help you out in your project as well.

use cdnjs link for mathjax library:

 <script type="text/javascript" async 
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?
config=TeX-MML-AM_CHTML"></script>

create mathjax directive: 

import {Directive, ElementRef, Input, OnChanges} from'@angular/core';
declare var MathJax:any;
@Directive({
selector : '[mathText]',
})
export class MathTextDirective implements OnChanges {
constructor(public elementRef: ElementRef) {
    this.hostEl = elementRef.nativeElement; //capture the HTML 
element host
}

//Used to bind data: eg: <div [mathText]="raw string">
@Input('mathText') inputString:string;
// host element
private hostEl:HTMLElement;

//have MathJax parse the host element and render the math
render(){MathJax.Hub.Queue(['Typeset', MathJax.Hub, this.hostEl])}

// called when the inputString changes.
ngOnChanges(){
    //make the input string into the innerText of the host element
    this.hostEl.innerText = this.inputString;
    this.render();
 }
}

Register this directive in app.module.ts and use this directive in html like:

 <div [mathText]="\frac{a}{b}"></div>

Upvotes: 2

Related Questions