开发离线MathJax Android移动应用程序

时间:2015-02-08 12:42:09

标签: javascript android webview mathjax mathematical-typesetting

我一直致力于开发用于排版数学应用程序的移动应用程序,但我遇到了一个问题。根据规则,代码是可以的,但表达式不会改变。没有进行排版。

这是我的MainActivity代码,请告诉我哪里有漏洞:

public class MainActivity extends Activity implements View.OnClickListener
{

    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;
}

public void onClick(View v) {
    if (v == findViewById(R.id.button2)) {
        WebView w = (WebView) findViewById(R.id.webview);
        EditText e = (EditText) findViewById(R.id.edit);
        w.loadUrl("javascript:document.getElementById('math').innerHTML='\\\\["
                   +doubleEscapeTeX(e.getText().toString())+"\\\\]';");
        w.loadUrl("javascript:MathJax.Hub.Queue(['Typeset',MathJax.Hub]);");
    }
    else if (v == findViewById(R.id.button3)) {
        WebView w = (WebView) findViewById(R.id.webview);
        EditText e = (EditText) findViewById(R.id.edit);
        e.setText("");
        w.loadUrl("javascript:document.getElementById('math').innerHTML='';");
        w.loadUrl("javascript:MathJax.Hub.Queue(['Typeset',MathJax.Hub]);");
    }
}

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState)
{
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
    WebView 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","");
    EditText e = (EditText) findViewById(R.id.edit);
    e.setBackgroundColor(Color.LTGRAY);
    e.setTextColor(Color.BLACK);
    e.setText("");
    Button b = (Button) findViewById(R.id.button2);
    b.setOnClickListener(this);
    b = (Button) findViewById(R.id.button3);
    b.setOnClickListener(this);

}
}

2 个答案:

答案 0 :(得分:5)

对不起自我推销。但也许你可以试试MathView。这是一个基于Android WebView的自定义视图库,并使用MathJax来显示数学公式。

MathView的用法与TextView类似,但它会自动呈现TeX代码。

<io.github.kexanie.library.MathView
    android:id="@+id/formula_one"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    auto:text="When \\(a \\ne 0\\), there are two solutions to \\(ax^2 + bx + c = 0\\) and they are $$x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}.$$"
    >
</io.github.kexanie.library.MathView>

希望这有帮助!

答案 1 :(得分:0)

使用此代码

w.loadDataWithBaseURL("http://bar",
"<html><head>" +
" <meta name=\"viewport\" content=\"width=device-width, user-scalable=yes\" />" +
"</head>" +
"" +
"<body style=\"font-size:18px\" >" +
"<b>Put here your equation</b> </br> " +
"<script type=\"text/x-mathjax-config\">" +
"  MathJax.Hub.Config({\n" +
"  CommonHTML: { linebreaks: { automatic: true },EqnChunk:(MathJax.Hub.Browser.isMobile?10:50) },displayAlign: \"left\",\n" +
"  \"HTML-CSS\": { linebreaks: { automatic: true } ," +
"\n" +
"    preferredFont: \"STIX\"}," +
"extensions: [\"tex2jax.js\"],messageStyle:\"none\"," +
"jax: [\"input/TeX\", \"input/MathML\",\"output/HTML-CSS\"]," +
"tex2jax: {inlineMath: [['$','$'],['\\\\(','\\\\)']]}" +
"});" +
"</script>" +
"<script type=\"text/javascript\" async src=\"file:///android_asset/MathJax/MathJax.js?config=TeX-AMS-MML_HTMLorMML\"></script>" +
"" +
"</body>" +
"</html>", "text/html", "utf-8", "");