swiftui - 如何在 SwiftUI 中使用 LaTeX 创建数学公式 TextView ？-6ren

swiftui - 如何在 SwiftUI 中使用 LaTeX 创建数学公式 TextView ？

转载作者：行者123 更新时间：2023-12-04 08:29:35

我是 Swift 编程的新手，希望使用 SwiftUI 创建一个应用程序。这是我希望实现的目标:

即一个文本字段，它具有 LaTeX 的实时语法高亮显示，然后其内容由 mathjax 呈现并显示在 WebView 中.

在本站和GitHub上搜索了一下，发现相关代码大多是Objective-C或者Swift 4.x(比如this)，没有一个是用SwiftUI做的界面。然而，在我的研究过程中，我发现了一种可能有效的方法。似乎与 JavaScriptCore一个可能可以使用的框架 highlight.js使语法突出显示(就像 Highlightr 在那里完成的，但它的代码非常复杂)。我对这种方法深信不疑，因为如果可以使用 highlight.js 来实现代码高亮显示，那么以类似的方式应该可以使用其他 JavaScript，例如 mathjax.js 实现其他功能。

不幸的是，由于我是 Swift 和 SwiftUI 的新手，所以我不知道从哪里开始。谁能给我一些提示？ (欢迎任何帮助，不一定使用 JavaScriptCore)

最佳答案

这是我目前的解决方案，它使用 CodeViewer用于代码突出显示的包，以及用于呈现数学的 mathjax.js。

import SwiftUI
import CodeViewer

struct LaTeXView: View {
    @State private var placeholderString: String = "Insert here"
    @State private var inputText: String = ""
    
    var body: some View {
        VStack {
            //MARK: Code editor
            CodeViewer(
                content: $inputText,
                mode: .latex,
                darkTheme: .solarized_dark,
                lightTheme: .solarized_light,
                isReadOnly: false,
                fontSize: 50
            )
            
            //MARK: for rendering math
            HTMLStringView(htmlContent: """
                <html>
                <head>
                  <meta charset="utf-8">
                  <meta name="viewport" content="width=device-width">
                  <title>MathJax example</title>
                  <script>MathJax = {
                        tex:{
                                inlineMath: [['$', '$'], ['\\(', '\\)']],
                                tags: 'ams'
                            },
                        svg:{
                                fontCache: 'global'
                            }
                        };
                  </script>
                  <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
                  <script id="MathJax-script" async
                          src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
                  </script>
                </head>
                <body>
                <p>
                \(inputText.replacingOccurrences(of: "\n\n", with: "<br>"))
                </p>
                </body>
                </html>
                """
            )
        }
    }
}

struct LaTeXView_Previews: PreviewProvider {
    static var previews: some View {
        LaTeXView()
    }
}