Flutter中flutter_html与flutter_math_fork无法渲染TeX数学公式问题

问题背景 #

使用flutter_html和flutter_math_fork构建可渲染含数学公式的HTML Widget，常规HTML内容可正常渲染，但配置的<tex>标签扩展无法触发数学公式渲染，且无错误提示。

现有代码实现 #

import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:flutter_math_fork/flutter_math.dart';

class HtmlContent extends StatelessWidget {
  final String text;
  const HtmlContent({super.key, required this.text});

  @override
  Widget build(BuildContext context) {
    return Html(
      data: text,
      shrinkWrap: true,
      extensions: [
        TagExtension(
            tagsToExtend: {"tex"},
            builder: (extensionContext) {
              return Math.tex(
                extensionContext.innerHtml,
                mathStyle: MathStyle.display,
                textStyle:
                    extensionContext.styledElement?.style.generateTextStyle(),
                onErrorFallback: (FlutterMathException e) {
                  return Text(e.message);
                },
              );
            }),
      ],
    );
  }
}

当前测试输入 #

HtmlContent(
  text: r'''<!DOCTYPE html>
<html>
<head>
  <title>Math Equation, Image, and Text</title>
</head>
<body>

<h1>Math Equation, Image, and Text Example</h1>

<!-- Math Equation using LaTeX notation -->
<p>Math Equation: \(x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}\)</p>

<!-- Image -->
<img src="https://example.com/sample-image.jpg" alt="Sample Image" width="300" height="200">

<!-- Text -->
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque consequat justo at sem venenatis, nec facilisis odio ultricies. 
  Integer vel quam eu ligula posuere scelerisque. Curabitur varius odio non augue ultrices, sit amet vestibulum lectus tincidunt. 
  Suspendisse potenti.
</p>

</body>
</html>
''',
),

问题分析 #

1. 测试内容未匹配配置的标签：当前测试用的是\( ... \)格式，但代码中仅配置了处理<tex>标签的扩展，因此无法触发公式渲染逻辑。
2. 扩展逻辑本身无错误：TagExtension的配置符合flutter_html文档要求，标签监听和builder逻辑均正确。

解决方案 #

方案1：修改测试内容使用<tex>标签 #

将测试内容中的\(x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}\)替换为<tex>x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}</tex>，修改后的测试代码如下：

HtmlContent(
  text: r'''<!DOCTYPE html>
<html>
<head>
  <title>Math Equation, Image, and Text</title>
</head>
<body>

<h1>Math Equation, Image, and Text Example</h1>

<!-- Math Equation using <tex> tag -->
<p>Math Equation: <tex>x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}</tex></p>

<!-- Image -->
<img src="https://example.com/sample-image.jpg" alt="Sample Image" width="300" height="200">

<!-- Text -->
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque consequat justo at sem venenatis, nec facilisis odio ultricies. 
  Integer vel quam eu ligula posuere scelerisque. Curabitur varius odio non augue ultrices, sit amet vestibulum lectus tincidunt. 
  Suspendisse potenti.
</p>

</body>
</html>
''',
),

方案2：添加SpanExtension支持\( ... \)格式（可选） #

如果需要兼容\( ... \)这种常用LaTeX行内公式格式，可以在extensions中添加SpanExtension识别并处理该模式：

extensions: [
  TagExtension(
    tagsToExtend: {"tex"},
    builder: (extensionContext) {
      return Math.tex(
        extensionContext.innerHtml,
        mathStyle: MathStyle.display,
        textStyle:
            extensionContext.styledElement?.style.generateTextStyle(),
        onErrorFallback: (FlutterMathException e) {
          return Text(e.message);
        },
      );
    },
  ),
  SpanExtension(
    matcher: (text) => RegExp(r'\\\((.*?)\\\)').firstMatch(text),
    builder: (context, match) {
      return Math.tex(
        match.group(1)!,
        mathStyle: MathStyle.text,
        textStyle: context.style.generateTextStyle(),
        onErrorFallback: (e) => Text(e.message),
      );
    },
  ),
],

验证结果 #

修改测试内容使用<tex>标签后，数学公式将通过flutter_math_fork正确渲染；若添加SpanExtension，则\( ... \)格式的公式也能正常渲染。

内容的提问来源于stack exchange，提问作者Abir Ahsan