KaTeXView with Jetpack Compose

You can import the following files into the assets folder：

katex.min.css
katex.min.js
auto-render.min.js
fonts folder

Then write a template Html and place it in the assets folder:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="file:///android_asset/katex.min.css" />
        <script defer src="file:///android_asset/katex.min.js"></script>
        <script defer src="file:///android_asset/contrib/auto-render.min.js" onload="renderMathInElement(document.body);"></script>
        <script>
            function addBody(str){
                document.getElementById("text").innerHTML=str;
                render();
            }
            function render(){
                renderMathInElement(document.body);
            }
        </script>
    </head>
    <body id="text"></body>
</html>

implementation "com.google.accompanist:accompanist-webview:0.31.3-beta"

var webView by remember {
     mutableStateOf<WebView?>(null)
}
val state = rememberWebViewState("file:///android_asset/template.html")
if (state.loadingState is LoadingState.Finished) { 
     webView?.loadUrl("javascript:addBody('\$\$\\\\frac{1}{2} x^{2} y\$\$')")
}
WebView(
     state = state,
     modifier = Modifier,
     onCreated = {
         it.settings.javaScriptEnabled = true
         webView = it
    }
)

judemanutd / KaTeXView

KaTeXView with Jetpack Compose #11