Flutter文本高亮插件re_highlight的使用

Re-Highlight 是一个强大的语法高亮插件，适用于Flutter项目。它能够通过简单的定义语法文件来实现文本高亮，并内置了多种编程语言的高亮规则。

开始使用

首先，在你的 pubspec.yaml 文件中添加 re_highlight 依赖：

dependencies:
  re_highlight: ^0.0.3

然后，你可以使用以下代码来实现文本高亮功能：

import 'package:flutter/material.dart';
import 'package:re_highlight/languages/all.dart';
import 'package:re_highlight/re_highlight.dart';
import 'package:re_highlight/styles/all.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String? _language;
  String? _theme;

  final CodeThemeController _controller = CodeThemeController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Highlighting by Reqable'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(10),
        child: Column(
          children: [
            Row(
              children: [
                SizedBox(
                  width: 100,
                  child: Text('Language'),
                ),
                DropdownButton<String>(
                  items: builtinAllLanguages.keys.map((language) => DropdownMenuItem<String>(
                    value: language,
                    child: Text(language)
                  )).toList(),
                  value: _language,
                  onChanged: (value) {
                    setState(() {
                      _language = value;
                      _controller.languages = value == null ? const [] : [value];
                    });
                  },
                ),
              ],
            ),
            Row(
              children: [
                SizedBox(
                  width: 100,
                  child: Text('Theme'),
                ),
                DropdownButton<String>(
                  items: builtinAllThemes.keys.map((theme) => DropdownMenuItem<String>(
                    value: theme,
                    child: Text(theme)
                  )).toList(),
                  value: _theme,
                  onChanged: (value) {
                    setState(() {
                      _theme = value;
                      _controller.theme = value == null ? const {} : builtinAllThemes[value] ?? const {};
                    });
                  },
                ),
              ],
            ),
            Expanded(
              child: Container(
                child: TextField(
                  controller: _controller,
                  maxLines: null,
                  expands: true,
                  textAlign: TextAlign.start,
                  textAlignVertical: TextAlignVertical.top,
                  decoration: InputDecoration(
                    border: OutlineInputBorder()
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class CodeThemeController extends TextEditingController {
  List<String> languages;
  Map<String, TextStyle> theme;

  late final Highlight _highlight;

  CodeThemeController({
    String? text,
    this.languages = const [],
    this.theme = const {},
  }) {
    _highlight = Highlight();
    _highlight.registerLanguages(builtinAllLanguages);
    if (text != null) {
      this.text = text;
    }
  }

  @override
  TextSpan buildTextSpan({
    required BuildContext context,
    TextStyle? style,
    required bool withComposing,
  }) {
    if (languages.isEmpty || theme.isEmpty) {
      return super.buildTextSpan(
        context: context,
        style: style,
        withComposing: withComposing,
      );
    }
    final HighlightResult result = _highlight.highlightAuto(text, languages);
    final TextSpanRenderer renderer = TextSpanRenderer(style, theme);
    result.render(renderer);
    return renderer.span ?? super.buildTextSpan(
      context: context,
      style: style,
      withComposing: withComposing,
    );
  }
}

关键步骤解释

1. 注册语言：使用 highlight.registerLanguages(builtinAllLanguages) 注册所有支持的语言。
2. 选择语言和主题：通过下拉菜单选择需要高亮的语言和主题。
3. 高亮处理：在 buildTextSpan 方法中，根据选择的语言和主题对文本进行高亮处理。

示例效果

通过上述代码，你可以在Flutter应用中实现动态的文本高亮显示，支持多种编程语言和自定义的主题样式。

更多示例和详细信息，请参考 Re-Highlight GitHub 和 Pub.dev 上的文档。

希望这个示例能帮助你在Flutter项目中快速集成文本高亮功能！如果有任何问题或建议，欢迎提交Issue或PR。