Flutter文本高亮插件highlighting的使用

Flutter文本高亮插件highlighting的使用

highlighting 是一个用于超过190种语言的代码语法高亮库。

如果你正在寻找适用于Flutter的Widget，可以查看：

• flutter_highlighting。

此包是将 HighlightJS 项目移植到Dart中。它会定期通过自动脚本从原始JavaScript版本进行更新。

使用方法

import 'package:highlighting/highlighting.dart';
import 'package:highlighting/languages/dart.dart';

void main() {
  final source = '''main() {
  print('Highlighting by Akvelon.');
}
''';

  highlight.registerLanguage(dart);

  final highlighted = highlight.parse(source, languageId: dart.id);
  final html = highlighted.toHtml();
  print(html); // HTML string
}

上述代码展示了如何使用 highlighting 包来解析并高亮一段Dart代码。首先导入必要的库，然后注册所需的编程语言（在这个例子中为Dart），接着解析源代码，并最终将其转换为HTML字符串。

版本和迁移

该包使用了与HighlightJS独立的版本号。例如，版本 0.9.0+11.8.0 表示：

• Dart包自身的版本为 0.9.0，并且它相对于版本 0.8.x 有重大更改。
• 从HighlightJS版本 11.8.0 移植而来。

这允许 pub 工具自动防止你遇到破坏性的更改。

迁移指南：

• 从highlight迁移到v0.9。

维护者指南

• 维护者指南，了解自动移植的工作原理。
• 如何将HighlightJS移植到Dart。

参考资料

• 所有可用的语言。

完整示例Demo

以下是完整的示例代码，你可以直接在你的Flutter项目中运行它。

// 导入必要的库
import 'package:flutter/material.dart';
import 'package:highlighting/highlighting.dart';
import 'package:highlighting/languages/dart.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Highlighting Demo"),
        ),
        body: Center(
          child: HighlightingText(),
        ),
      ),
    );
  }
}

class HighlightingText extends StatefulWidget {
  [@override](/user/override)
  _HighlightingTextState createState() => _HighlightingTextState();
}

class _HighlightingTextState extends State<HighlightingText> {
  String source = '''
main() {
  print('Highlighting by Akvelon.');
}
''';

  [@override](/user/override)
  void initState() {
    super.initState();
    // 注册Dart语言
    highlight.registerLanguage(dart);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(16.0),
      child: HtmlRenderer(
        html: highlight.parse(source, languageId: dart.id).toHtml(),
      ),
    );
  }
}

// 自定义HtmlRenderer组件用于渲染HTML字符串
class HtmlRenderer extends StatelessWidget {
  final String html;

  HtmlRenderer({required this.html});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Html(data: html);
  }
}