I need to integrate MATHJAX into my android webview to parse mathml data coming through API in json format. I took reference from this: https://github.com/leathrum/android-apps.
When I wrote this code:
public void fillWebView(final WebView w, final String yourHtml) {
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", "");
w.loadUrl("javascript:document.getElementById('math').innerHTML='\\\\["
+ doubleEscapeTeX(yourHtml)
+ "\\\\]';");
w.loadUrl("javascript:MathJax.Hub.Queue(['Typeset',MathJax.Hub]);");
}
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;
}
I got error like this:
[INFO:CONSOLE(1)] "Uncaught TypeError: Cannot set property 'innerHTML' of null", source: (1)
04-21 19:57:05.449 26698-26698/com.myclasscampus I/chromium: [INFO:CONSOLE(1)] "Uncaught ReferenceError: MathJax is not defined", source: (1)
I tried this solution into it: WebView code generating Uncaught TypeError and Uncaught ReferenceError errors on Android 4.4.2 (API 19) emulator ....
So my New code is like this:
public void fillWebView(final WebView w, final String yourHtml) {
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", "");
w.setWebViewClient(new WebViewClient() {
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT){
loadUrlKitKat(w,doubleEscapeTeX(yourHtml));
}
else{
w.loadUrl("javascript:document.getElementById('math').innerHTML='\\\\["
+ doubleEscapeTeX(yourHtml)
+ "\\\\]';");
w.loadUrl("javascript:MathJax.Hub.Queue(['Typeset',MathJax.Hub]);");
}
}
});
}
@TargetApi(Build.VERSION_CODES.KITKAT)
private void loadUrlKitKat(WebView w,String param){
w.evaluateJavascript("javascript:document.getElementById('math').innerHTML='<font color=\"#97FD97\">`"+param+"`</font>';",null);
w.evaluateJavascript("javascript:MathJax.Hub.Queue(['Typeset',MathJax.Hub]);",null);
}
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;
}
So now I am getting this error:
[INFO:CONSOLE(1)] "Uncaught SyntaxError: Unexpected token ILLEGAL", source: (1)
NOTE: I am not passing anyweb url in my web-view. My web view is defined in XML and i need to parse mathml data coming through APIs. (as a json object).
Guide me how to solve this.