android - 在 Web View 中呈现包含数学方程式的 HTML 数据

Question

我想将 Html 数据显示到 webview 中，其中还包含使用 MathJax 的数学方程式，但在我的应用程序中我无法呈现数学方程式

我尝试使用下面的代码

    webView.getSettings().setJavaScriptEnabled(true);
    webView.getSettings().setBuiltInZoomControls(true);
    webView.getSettings().setLoadWithOverviewMode(true);
    webView.loadDataWithBaseURL("http://bar/", "<script type='text/x- mathjax-config'>"
            + "MathJax.Hub.Config({ "
            + "showMathMenu: false, "
            + "jax: ['input/MathML','output/HTML-CSS'], " // output/SVG
            + "extensions: ['mml2jax.js'], "
            + "TeX: { extensions: ['noErrors.js','noUndefined.js'] }, "
            //+"'SVG' : { blacker: 30, "
            // +"styles: { path: { 'shape-rendering': 'crispEdges' } } } "
            + "});</script>"
            + "<script type='text/javascript' "
            + "src='file:///android_asset/MathJax/MathJax.js'"
            +"<script type= 'text/javascript' "
            +"src=http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"
            + "></script><span id='text'> </span> <span id='math'></span>", "text/html", "utf-8", "");


    String htmlFilename = "test.html";
    AssetManager mgr = getBaseContext().getAssets();
    try {
        InputStream in = mgr.open(htmlFilename, AssetManager.ACCESS_BUFFER);
        String htmlContentInStringFormat = StreamToString(in);
        in.close();
        if (android.os.Build.VERSION.SDK_INT < 19) {
            webView.loadUrl("javascript:document.getElementById('math').innerHTML='"
                                    + "<math xmlns=\"http://www.w3.org/1998/Math/MathML\">"
                                    + "<mstyle displaystyle=\"true\">"
                                    + doubleEscapeTeX(htmlContentInStringFormat)
                                    + "</mstyle></math>';");
            webView.loadUrl("javascript:MathJax.Hub.Queue(['Typeset',MathJax.Hub]);");
        } else {
            webView.evaluateJavascript("javascript:document.getElementById('math').innerHTML='<font color=\"#000000\">`" + doubleEscapeTeX(htmlContentInStringFormat) + "`</font>';", null);
            webView.loadUrl("javascript:MathJax.Hub.Queue(['Typeset',MathJax.Hub]);");
        }
    } catch (Exception e) {

    }

我正在从 Assets 中加载 HTMl 文件，但它没有被渲染

测试.html

欧几里得除法引理指出，对于正整数 c 和 d 以及 c>d，存在唯一整数 q 和 r 满足条件 c=dq+r 使得 0≤r

设，任意正整数为c且d=3。

现在，根据欧几里得算法 c=3q+r 对于某个其他整数 q≥0。

余数的所有可能取值都是0,1,2，因为它满足条件0≤r<3。现在，c 的可能值是 3q 或 3q+1 或 3q+2。

情况 1:如果 c=3q。

c 3 = ( 3q ) 3 =27 q 3 =9( 9 q 3 ) =9m

情况 2:如果 c=3q+1。

c 3 = ( 3q+1 ) 3 =27 q 3 +27 q 2 +9q+1 =9( 3 q 3 +3 q 2 +q )+1 =9m+1

情况 2:如果 c=3q+2。

c 3 = ( 3q+2 ) 3 =27 q 3 +54 q 2 +36q+8 =9( 3 q 3 +6 q 2 +4q )+8 =9m+8

因此，任何正整数的立方都是 9m、9m+1 或 9m+8 的形式。

Answer 1

我看到 MathJax 是用来解释 MathML 语言的。

所以我建议你使用 GeckoView 而不是 WebView。

GeckoView 有一个支持 MathML 的构建

https://wiki.mozilla.org/Mobile/GeckoView .

我发布了一段代码来向您展示如何访问 html 子目录中的 Assets 文件。

唯一的问题是您增加了 apk 的权重 (+30Mo)。

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    GeckoView view = findViewById(R.id.geckoview);
    GeckoSession session = new GeckoSession();
    GeckoRuntime runtime = GeckoRuntime.create(this);

    session.open(runtime);
    view.setSession(session);

    session.loadUri("resource://android/assets/html/myMathMLFile.html");
}