Flutter 中是否有通过 Delta 提供的 LaTeX 方程渲染方法？

Question

我正在开发一个必须显示富文本的应用程序。所以这个富文本将来自 Quill 富文本编辑器。 Quill 以 Delta 格式导出此富文本，该格式基本上是一个 json，其中包含文本及其属性。 前-

{"ops":[
   {"insert":"This is a big header"},
   {"attributes":{"header":1},"insert":"\n"},
   {"insert":"And this is a smaller header"},
   {"attributes":{"header":2}, "insert":"\n"},
   {"insert":"And this is plaintext\n"}
]}

现在，这是主要问题。我将使用的 delta 将包含 LaTeX 方程（一种存储复杂数学方程的格式）。

我想在 Flutter 中展示这个富文本和方程。

我找到了一个包 flutter_quill ，它将 delta 渲染为富文本，但不渲染乳胶方程。

这是我想在flutter中展示的Delta的一小部分

{"ops":[
   {"insert": "This is the Latex Equation"},
   {
      "attributes": {"header": 1},
      "insert": "\n"
   },
   {"insert": "\\[x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}\\]\n"}
]}

这就是它渲染增量的方式。

预期结果

有一个名为 Flutter_tex 的包可以帮助渲染 LaTeX 方程。

我面临的主要问题是如何检测Delta中的LaTeX方程并使用flutter_tex渲染它们。

ps-我使用ChatGPT作为解决方案，但提供的解决方案已经过时了ig。这与使用自定义渲染器和 Flutter Quill 来渲染方程有关。

Answer 1

您可以将每个

insert

的值（或您期望乳胶数学表达式出现的位置）与检查乳胶数学方程的开头和结尾的正则表达式进行匹配。 这篇文章展示了开始和结束数学表达式的可能性。

注意：上述解决方案在大多数情况下应该有效。但用户可以添加包含这些序列的文本，但不希望它们呈现为方程式。

想法：我不熟悉 Quill，但也许有一种方法可以向每个

attribute

添加

insert

或某种标志，以向解析器指示应如何处理此

insert

。例如：

plain-text

、

latex-equation

、...