如何在Android应用中实现LaTeX数学公式与普通文本的混合渲染？

阿华AIGC实验室

2026-4-7

我来帮你搞定这个混合渲染的问题！其实用Android的WebView + KaTeX就能完美实现，既能渲染普通文本，又能精准识别并渲染嵌入其中的LaTeX公式。下面是我整理的完整实现方案：

核心思路

我们会在WebView中加载一个预配置了KaTeX的HTML页面，然后把包含普通文本和LaTeX公式的内容传递给这个页面，让KaTeX的自动渲染功能识别公式分隔符（比如行内公式、$$块级公式），自动完成混合内容的渲染。

预配置的HTML模板

这个HTML已经集成了KaTeX的核心库和自动渲染扩展，还做了深色主题适配，直接用就行：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css" integrity="sha384-n8MVd4RsNIU0tAv4ct0nTaAbDJwPJzDEaqSD1odI+WdtXRGWt2kTvGFasHpSy3SV" crossorigin="anonymous">
    <!-- 延迟加载KaTeX提升渲染速度 -->
    <script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js" integrity="sha384-XjKyOOlGwcjNTAIQHIpgOno0Hl1YQqzUOEleOLALmuqehneUG+vnGctmUb0ZY0l8" crossorigin="anonymous"></script>
    <!-- 自动渲染文本中的数学公式 -->
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js" integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous"></script>
    <style>
        body {
            font-size: 18px;
            padding: 16px;
            color: #FFFFFF;
            background-color: #121212;
            white-space: pre-line;
            line-height: 1.6;
        }
    </style>
</head>
<body>
    <div id="content"></div>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const queryString = decodeURIComponent(window.location.search);
            const match = queryString.match(/content=(.*)/);
            if (match && match[1]) {
                const content = match[1]
                    .replace(/\\n/g, "<br>")
                    .replace(/\\\\/g, "\\");
                document.getElementById("content").innerHTML = content;
                // 配置自动渲染规则
                renderMathInElement(document.body, {
                    delimiters: [
                        {left: "\\(", right: "\\)", display: false}, // 行内公式分隔符
                        {left: "$$", right: "$$", display: true}    // 块级公式分隔符
                    ],
                    throwOnError: false // 忽略渲染错误，避免影响整体内容
                });
            }
        });
    </script>
</body>
</html>

Android端调用代码

你可以把上面的HTML文件命名为latex_render.html，放在项目的assets目录下，然后用WebView加载并传递混合内容：

Kotlin示例

import android.os.Bundle
import android.webkit.WebView
import androidx.appcompat.app.AppCompatActivity

class LatexRenderActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val webView = WebView(this)
        setContentView(webView)

        // 配置WebView支持JavaScript
        webView.settings.javaScriptEnabled = true

        // 准备测试内容：普通文本 + LaTeX公式
        val mixedContent = """
            这是一个普通文本段落，里面包含行内公式：\(E=mc^2\)
            
            下面是一个块级公式：
            $$\sum_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6}$$
            
            再结合文本讲个定理：对于任意实数a、b，有\((a+b)^2 = a^2 + 2ab + b^2\)
        """.trimIndent()

        // 对内容进行编码，避免URL参数问题
        val encodedContent = java.net.URLEncoder.encode(mixedContent, "UTF-8")
        // 加载assets中的HTML页面，并传递内容
        webView.loadUrl("file:///android_asset/latex_render.html?content=$encodedContent")
    }
}

Java示例

import android.os.Bundle;
import android.webkit.WebView;
import androidx.appcompat.app.AppCompatActivity;
import java.net.URLEncoder;

public class LatexRenderActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        WebView webView = new WebView(this);
        setContentView(webView);

        // 启用JavaScript
        webView.getSettings().setJavaScriptEnabled(true);

        // 测试混合内容
        String mixedContent = "这是一个普通文本段落，里面包含行内公式：\\(E=mc^2\\)\n\n" +
                "下面是一个块级公式：\n" +
                "$$\\sum_{n=1}^{\\infty} \\frac{1}{n^2} = \\frac{\\pi^2}{6}$$\n\n" +
                "再结合文本讲个定理：对于任意实数a、b，有\\((a+b)^2 = a^2 + 2ab + b^2\\)";

        try {
            String encodedContent = URLEncoder.encode(mixedContent, "UTF-8");
            webView.loadUrl("file:///android_asset/latex_render.html?content=" + encodedContent);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

关键细节说明

公式分隔符配置：我们在renderMathInElement中指定了两种分隔符：
- ：用于行内公式（和普通文本在同一行）
- $$：用于块级公式（单独占一行，居中显示）
  KaTeX会自动识别这些分隔符内的内容并渲染成公式，其他内容保持普通文本格式。
内容传递方式：通过URL的content参数传递内容，HTML中会解析这个参数并渲染到页面中，同时处理了换行符和转义字符的转换。
错误处理：设置throwOnError: false可以避免单个公式的渲染错误导致整个页面崩溃。

内容来源于stack exchange