讓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