Katex SwiftUI Example

import SwiftUI
import WebKit

struct FieldsView: View {
    let fieldDef = """
    <p>A field \\((F, +, \\cdot)\\) is a set \\(F\\) together with two binary operations: addition \\((+)\\) and multiplication \\((\\cdot)\\), satisfying the following axioms:</p>

    <ol>
        <li><strong>(F1)</strong> \\((F, +)\\) is an abelian group:
            <ul>
                <li>Closure: \\(a + b \\in F\\)</li>
                <li>Associativity: \\[(a + b) + c = a + (b + c)\\]</li>
                <li>Commutativity: \\(a + b = b + a\\)</li>
                <li>Identity: \\(\\exists 0_F \\in F\\) such that \\(a + 0_F = a\\)</li>
                <li>Inverse: \\(\\exists -a \\in F\\) such that \\(a + (-a) = 0_F\\)</li>
            </ul>
        </li>
        <li><strong>(F2)</strong> \\((F \\setminus \\{0_F\\}, \\cdot)\\) is an abelian group:
            <ul>
                <li>Closure: \\(a \\cdot b \\in F\\)</li>
                <li>Associativity: \\((a \\cdot b) \\cdot c = a \\cdot (b \\cdot c)\\)</li>
                <li>Commutativity: \\(a \\cdot b = b \\cdot a\\)</li>
                <li>Identity: \\(\\exists 1_F \\in F\\) such that \\(a \\cdot 1_F = a\\)</li>
            </ul>
        </li>
        <li><strong>(F3)</strong> Distributivity: \\(a \\cdot (b + c) = a \\cdot b + a \\cdot c\\)</li>
        <li><strong>(F4)</strong> No zero divisors: if \\(a \\cdot b = 0_F\\), then \\(a = 0_F\\) or \\(b = 0_F\\)</li>
    </ol>
    """

    var body: some View {
        ScrollView {
            VStack(alignment: .leading, spacing: 16) {
                Text("Field Definition")
                    .font(.title2)
                    .bold()
                HTMLWebView(
                    text: fieldDef,
                    fontSize: 16,
                    borderColor: .blue,
                    height: 500
                )
            }
            .padding()
        }
    }
}


// MARK: - Simple WKWebView Wrapper
struct WebView: UIViewRepresentable {
    let html: String

    func makeUIView(context: Context) -> WKWebView {
        let webView = WKWebView()
        webView.scrollView.isScrollEnabled = false
        webView.isOpaque = false
        webView.backgroundColor = .clear
        return webView
    }

    func updateUIView(_ uiView: WKWebView, context: Context) {
        uiView.loadHTMLString(html, baseURL: nil)
    }
}

// MARK: - HTMLWebView with KaTeX Support
struct HTMLWebView: View {
    let text: String
    let fontSize: Int
    let borderColor: Color
    let borderWidth: CGFloat
    let cornerRadius: CGFloat
    let height: CGFloat
    let paragraphAlignment: String // e.g., "left", "center", "right", "justify"

    // Custom Initializer with Default Parameters
    init(
        text: String,
        fontSize: Int = 16,
        borderColor: Color = .blue,
        borderWidth: CGFloat = 2,
        cornerRadius: CGFloat = 10,
        height: CGFloat = 200,
        paragraphAlignment: String = "left"
    ) {
        self.text = text
        self.fontSize = fontSize
        self.borderColor = borderColor
        self.borderWidth = borderWidth
        self.cornerRadius = cornerRadius
        self.height = height
        self.paragraphAlignment = paragraphAlignment
    }

    var body: some View {
        let htmlContent = composeHTML(text: text)

        return VStack {
            WebView(html: htmlContent)
        }
        .frame(height: height)
        .overlay(
            RoundedRectangle(cornerRadius: cornerRadius)
                .stroke(borderColor, lineWidth: borderWidth)
        )
    }

    private func composeHTML(text: String) -> String {
        """
        <!DOCTYPE html>
        <html>
        <head>
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css">
            <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js"></script>
            <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js"
                onload="renderMathInElement(document.body, {
                    delimiters: [
                        {left: '\\\\(', right: '\\\\)', display: false},
                        {left: '\\\\[', right: '\\\\]', display: true}
                    ]
                });">
            </script>
            <style>
                body {
                    font-family: -apple-system, sans-serif;
                    font-size: \(fontSize)px;
                    margin: 12px;
                    color: #000;
                    background-color: transparent;
                }
                p {
                    text-align: \(paragraphAlignment);
                }
                .katex {
                    font-size: \(fontSize)px;
                }
            </style>
        </head>
        <body>
            \(text)
        </body>
        </html>
        """
    }
}