如何在 SwiftUI 中使用 LaTeX 创建数学公式文本视图？答案

【问题标题】：How can I create a math formula text view with LaTeX in SwiftUI?如何在 SwiftUI 中使用 LaTeX 创建数学公式文本视图？
【发布时间】：2021-06-02 07:33:29
【问题描述】：

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

即具有LaTeX 的实时语法突出显示的文本字段，然后其内容由mathjax 呈现并显示在网络视图中。

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

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

【问题讨论】：

标签： swiftui

【解决方案1】：

这是我目前的解决方案，它使用 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()
    }
}

结果如下：

【讨论】：

【解决方案2】：

这是一个使用出色框架的可能解决方案，RichTextView：

import RichTextView

struct ContentView : View {
    
    @State var string : String = "In physics, the mass-energy equivalence is stated by the equation [math]$E=mc^2$[/math], discovered in 1905 by Albert Einstein."
    
    var body : some View {
        TextField("Test", text: $string)
            .padding(.vertical, 32)
            .border(Color.red)
        
        TextView(string: $string)
            .padding(.horizontal, 16)
    }
}


struct TextView : UIViewRepresentable {
    
    @Binding var string : String
    
    func makeUIView(context: Context) -> RichTextView {
        let richTextView = RichTextView(
            input: string,
            latexParser: LatexParser(),
            font: UIFont.systemFont(ofSize: UIFont.systemFontSize),
            textColor: UIColor.black,
            frame: CGRect.zero,
            completion: nil
        )
        
        return richTextView
        
    }

   func updateUIView(_ uiView: RichTextView, context: Context) {
        uiView.update(
            input: string,
            latexParser: LatexParser(),
            font: UIFont.systemFont(ofSize: UIFont.systemFontSize),
            textColor: UIColor.black,
            completion: nil
        )
   }
}

您始终必须以 [math] 开头并以 [/math] 结尾，但可以使用默认 Latex。有关其文档的更多信息。

【讨论】：

请问如何在我的项目中添加RichTextView？我收到此错误：https://github.com/tophat/RichTextView has no Package.swift manifest.
我是用 Podfile 安装的