Flutter文本高亮插件highlight的使用

highlight 是一个用于Dart语言的语法高亮库。如果你正在寻找Flutter widget，可以参考 flutter_highlight。

使用方法

基本用法

首先，导入 highlight 包并解析代码片段：

import 'package:highlight/highlight.dart' show highlight;

void main() {
  var source = '''main() {
  print("Hello, World!");
}
''';

  var result = highlight.parse(source, language: 'dart');
  var html = result.toHtml();
  print(html); // 输出HTML字符串
}

注意：所有可用的语言都已注册。如果需要更精确的控制，可以手动注册语言：

import 'package:highlight/highlight_core.dart' show highlight;
import 'package:highlight/languages/dart.dart';

void main() {
  var source = '''main() {
  print("Hello, World!");
}
''';

  highlight.registerLanguage('dart', dart);

  var result = highlight.parse(source, language: 'dart');
  var html = result.toHtml();
  print(html); // 输出HTML字符串
}

可用语言

查看所有可用的语言，请参考 All available languages。

许可证

该库使用 MIT 许可证。

示例Demo

下面是一个完整的Flutter应用示例，展示如何在Flutter中使用 highlight 插件来高亮显示代码片段：

import 'package:flutter/material.dart';
import 'package:highlight/highlight.dart' show highlight;
import 'package:highlight/languages/dart.dart';
import 'package:highlight/languages/java.dart';
import 'package:highlight/languages/python.dart';
import 'package:flutter_highlight/flutter_highlight.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Highlight Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Highlight Demo'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: ListView(
            children: <Widget>[
              CodeBlock(
                code: '''
void main() {
  print("Hello, World!");
}
''',
                language: 'dart',
              ),
              CodeBlock(
                code: '''
public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}
''',
                language: 'java',
              ),
              CodeBlock(
                code: '''
print("Hello, World!")
''',
                language: 'python',
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class CodeBlock extends StatelessWidget {
  final String code;
  final String language;

  CodeBlock({required this.code, required this.language});

  @override
  Widget build(BuildContext context) {
    return Card(
      margin: EdgeInsets.only(bottom: 16.0),
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              '$language Code',
              style: TextStyle(fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 8.0),
            FlutterHighlight(
              text: code,
              language: language,
              theme: flutterTheme,
            ),
          ],
        ),
      ),
    );
  }
}

final Map<String, TextStyle> flutterTheme = {
  'root': TextStyle(color: Colors.black, background: Paint()..color = Colors.grey[200]!),
  'keyword': TextStyle(color: Colors.blue),
  'comment': TextStyle(color: Colors.green.shade500),
  'string': TextStyle(color: Colors.red),
  'number': TextStyle(color: Colors.orange),
};

在这个示例中，我们创建了一个简单的Flutter应用，展示了不同编程语言的代码片段，并使用 highlight 插件对这些代码进行了语法高亮显示。每个代码块都被包裹在一个 Card 中，并且通过 FlutterHighlight 组件进行高亮处理。

希望这个示例能够帮助你理解如何在Flutter项目中使用 highlight 插件来进行文本高亮显示。