Search code examples
androidmathjax

MathJax Not working in android


I am trying to use MathJax Library in android but certainly not getting success. I want to display some complex mathematical formulas which can be in the middle of text(Like Mathematical derivations) this link is certainly not available anymore http://cs.jsu.edu/wordpress/?p=498

import android.os.Bundle;
import android.os.Handler;
import android.support.v7.app.ActionBarActivity;
import android.webkit.WebView;
import android.widget.Toast;

public class MainActivity extends ActionBarActivity {
    WebView w;

    private String doubleEscapeTeX(String s) {
        String t = "";
        for (int i = 0; i < s.length(); i++) {
            if (s.charAt(i) == '\'')
                t += '\\';
            if (s.charAt(i) != '\n')
                t += s.charAt(i);
            if (s.charAt(i) == '\\')
                t += "\\";
        }
        return t;
    }

    private int exampleIndex = 0;

    private String getExample(int index) {
        return getResources().getStringArray(R.array.tex_examples)[index];
    }

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        w = (WebView) findViewById(R.id.webview);
        w.getSettings().setJavaScriptEnabled(true);
        w.getSettings().setBuiltInZoomControls(true);
        w.loadDataWithBaseURL("http://bar",
                "<script type='text/x-mathjax-config'>"
                        + "MathJax.Hub.Config({ " + "showMathMenu: false, "
                        + "jax: ['input/TeX','output/HTML-CSS'], "
                        + "extensions: ['tex2jax.js'], "
                        + "TeX: { extensions: ['AMSmath.js','AMSsymbols.js',"
                        + "'noErrors.js','noUndefined.js'] } " + "});</script>"
                        + "<script type='text/javascript' "
                        + "src='file:///android_asset/MathJax/MathJax.js'"
                        + "></script><span id='math'></span>", "text/html",
                "utf-8", "");

        // Here is my added code.
        new Handler().postDelayed(new Runnable() {

            @Override
            public void run() {
                // TODO Auto-generated method stub
                String s = getExample(exampleIndex++);
                if (exampleIndex > getResources().getStringArray(
                        R.array.tex_examples).length - 1)
                    exampleIndex = 0;
                Toast.makeText(MainActivity.this, s, Toast.LENGTH_SHORT).show();
                w.loadUrl("javascript:document.getElementById('math').innerHTML='\\\\["
                        + doubleEscapeTeX("\\int_{-\\infty}^{\\infty} e^{-x^2}\\, dx = \\sqrt{\\pi}"+ "\\\\]';"));
                w.loadUrl("javascript:MathJax.Hub.Queue(['Typeset',MathJax.Hub]);");

            }
        }, 1000);

    }
}

I am getting this in LogCat :

[INFO:CONSOLE(1)] "Uncaught ReferenceError: MathJax is not defined", source:  (1)

Thanks in advance

enter image description here


Solution

  • I got through the answer after wasting a day so taking some time to write the answer

    This is as per the solution given by @Neoh in this link Display Good-looking Math Formula in Android

    Note the mistake which I initially made : DO NOT COPY THE ASSESTS.ZIP file in your assets folder instead copy the MathJax folder in the asset folder.

    After this you might face the issue which gives ResourceNotFoundException for no reason and you might think that its something in the code that's missing but its not like that.Its a bug in Android buildToolVersion 21.0.1 which I was able to trace it there was one very very useful solution which help me notice this and solve this problem https://stackoverflow.com/a/26493179/4041688

    Thanks @Neoh and @Riley C for your solutions and help