LaTeX (LaTeX) is a typesetting system based on Ε χ, which was developed in the early 1980s by Leslie Lamport, an American computer scientist. Even users with no knowledge of typography and programming can make full use of the powerful functions provided by TeX, which can produce many book-quality prints in a few days or even hours. This is especially true for complex tables and mathematical formulas. Therefore, it is very suitable for producing high printing quality scientific and mathematical documents. The system is also suitable for generating all kinds of documents, from simple letters to complete books.

The above is the explanation of Latex in Baidu Encyclopedia. Due to requirements, we now need to implement the function of displaying Latex formulas in App. Of course, a normal Textview is not going to work, and if the server sends us this native formula, it’s going to have to be something on the left that we can’t read, so we need some way to do that, so we can read it, like the one on the right.

After much searching, we came up with the final solution, MathJax.js

Mathjax.js has the ability to turn a formula we don’t understand on a page into a formula we do, and we continue to explore this thread. Since JS is used, it is necessary to have a js carrier, which can only be Webview in Android. Therefore, in this function, we use Webview to display all the places where mathematical formulas are displayed. We’ll use MathJax.js to parse the formula and finally show us the formula in the form we want to understand.

Implementation approach

Load a local HTML file with MathJax.js configured using a Webview and call the JS method to dynamically replace the formula in the formula display area. That’s it!

The local HTML file is as follows:

Make sure that you put it in assets, whatever you want to call it, I’m going to call it mathJax.html.

<! 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>
Copy the code

The above HTML content is configured by referring to the official website of MathJax.js and my own project. The first script fragment is configured with mathJax. js formula filtering rules, and the second script fragment is a JS method implemented by myself to dynamically replace the formula in the display area. And call the MathJax. Hub. The Queue ([” Typeset, “MathJax. Hub]); Tell MathJax.js to rerender the page or it won’t take effect.

Webview Settings

We can dynamically generate a Webview, or we can draw a Webview in XML, set the related properties, and call the JS method to load the formula into the Webview to display what we want.

        container = \ "known set (A = \ {1, 1 \} \], \ [B = \ {x | mx = 1 \} \], and \ [A \ cup B = A \), then \ [m \] has A value of..."webView = findViewById(R.id.webview); mWebSettings = webView.getSettings(); / / support interact with JS mWebSettings. SetJavaScriptEnabled (true); / / set the coding format mWebSettings. SetDefaultTextEncodingName ("utf-8"); // Set the webView page to listen to webView.setWebViewClient(new)WebViewClient() {@override public void onPageFinished(final WebView view, String URL) {// Access the JS method webView.loadUrl("javascript:changeData('" + contain + "')"); }}); webView.loadUrl("file:///android_asset/MathJax.html");
Copy the code

What we want:


But the actual result:


Is it a surprise? Are you surprised? Why doesn’t it work? In the investigation again and again after the investigation, and after the big guy to detail investigation, learned a new knowledge —– “call JS pass parameter, will ‘\’ this symbol escape, it also blame their lack of knowledge. Once we find the problem, we change it to ‘\\’ in every place where ‘\’ appears. This fixes the problem, passes the correct formula to webView, and mathJax.js parses the correct formula into the desired form.

This is all I did when I was working on the WebView support Latex formula. I hope it will help others when they encounter this problem.