让Android支持Latex数学公式

时间 2019-11-17

原文原文链接

LaTeX（LATEX，音译“拉泰赫”）是一种基于ΤΕΧ的排版系统，由美国计算机学家莱斯利·兰伯特（Leslie Lamport）在20世纪80年代初期开发，利用这种格式，即便使用者没有排版和程序设计的知识也能够充分发挥由TeX所提供的强大功能，能在几天，甚至几小时内生成不少具备书籍质量的印刷品。对于生成复杂表格和数学公式，这一点表现得尤其突出。所以它很是适用于生成高印刷质量的科技和数学类文档。这个系统一样适用于生成从简单的信件到完整书籍的全部其余种类的文档。javascript

以上是“百度百科”对Latex的解释，因为需求要求，如今须要实现功能，在App中展现Latex公式。固然了，普通的Textview确定是不到要求的，若是服务器传给咱们的是这种原生的公式，那就只能是左边这种看不懂的东西了，因此须要某种方式来达到目的，让咱们看懂，像右边的这样。
css

通过多方寻找，咱们找到了最终的解决方案---MathJax.jshtml

MathJax.js可以使页面上的咱们看不懂的这种公式转换成咱们看懂的公式，沿着这个线索，咱们继续探索。既然用到了js，那么就须要有承载js的载体，在Android中只能是Webview了，因此在该功能中，咱们将全部展现数学公式的地方都用Webview来展现，而且用MathJax.js来解析其中的公式并最终展现给咱们想要的、可以看懂的公式形式。java

实现思路

使用Webview加载本地的一个配置有MathJax.js的html文件，并调用js方法动态替换公式展现区域的公式，就这么简单！android

本地的html文件以下：

注意放在assets文件夹下，随意取个名字就能够,我取名就叫MathJax.html了。web

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script type="text/x-mathjax-config">
            MathJax.Hub.Config({
                messageStyle: "none",tex2jax:
                    {inlineMath: [ ['$','$'], ["\\(","\\)"] ],
                    displayMath: [ ['$$','$$'], ["\\[","\\]"] ]},
                });
    </script>
    
    <script>
        function changeData(data) {
            document.getElementById('mainDiv').innerHTML = data;
            MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
        }
    </script>
    <script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=default"></script>
    <style type="text/css">
            body{
                background-color: #ffffff;
                -webkit-text-size-adjust: 100%!important;
                -webkit-overflow-scrolling : touch;
            }
            #mainDiv{
                position: absolute;
                margin: auto;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                font-size: 15px;
                word-wrap:
                break-word;
            }
        </style>
</head>

<body>
<div id="mainDiv">
</div>
</body>
</html>
复制代码

以上html的内容都是参考MathJax.js的官网及本身项目须要所配置的，在第一个script片断中配置的是MathJax.js的公式过滤规则，第二个script片断是我本身实现的一个js方法，用来动态替换显示区域的公式，并调用
MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
通知MathJax.js去从新渲染页面，不然不会生效。bash

Webview的相关设置

咱们能够动态生成一个Webview,也能够在xml中画一个Webview,而后设置相关属性，并调用js方法将公式加载到webview中显示出来咱们想要的样子。服务器

container = "已知集合\(A=\{-1,1\}\)，\(B=\{x|mx=1\}\)，且\(A\cup B=A\)，则\(m\)的值为________"
        webView = findViewById(R.id.webview);
        mWebSettings = webView.getSettings();
        //支持与JS交互
        mWebSettings.setJavaScriptEnabled(true);
        //设置编码格式
        mWebSettings.setDefaultTextEncodingName("utf-8"); 
        //设置webview的页面监听
        webView.setWebViewClient(new WebViewClient() {
            
            @Override
            public void onPageFinished(final WebView view, String url) {

                //访问JS方法
                webView.loadUrl("javascript:changeData('" + contain + "')");

            }
            
        }); 
        webView.loadUrl("file:///android_asset/MathJax.html");
复制代码

咱们想要的结果：
ide

可是实际的结果：

惊不惊喜？意不意外？怎么很差使了呢？在排查了一遍又一遍以后，又通过大佬得细节排查，学会了一个新知识-----“调用js传参的时候，会将'\'这个符号转义，这也怪本身才疏学浅了。再发现问题后，在每个出现'\'的地方转成'\\'”,这样就解决了问题，将正确的公式传到了webview，MathJax.js才将正确的公式解析成咱们想要的样子。ui

以上就是我在作webview支持Latex公式时全部的操做，但愿在别人遇到这个问题的时候能有所帮助。

1. matplotlib对LaTeX数学公式的支持
2. MathJax: 让前端支持数学公式
3. latex数学公式
4. LaTex: 数学公式
5. Latex-数学公式
6. LaTeX数学公式
7. LaTeX——数学公式
8. MacDown+Mathpix Markdown高效编辑数学公式支持LaTex语法
9. Latex数学公式表
10. 04 LaTeX 的数学公式
更多相关文章...
• R 绘图 - 中文支持 - R 语言教程
• SVN分支 - SVN 教程
• Flink 数据传输及反压详解
• Tomcat学习笔记（史上最全tomcat学习笔记）