Flutter代码高亮显示插件syntax_highlight的使用

Syntax Highlight

Syntax Highlight 包使用 TextMate 规则来高亮显示代码，这与许多流行的应用程序（如 VSCode）中使用的规则相同。目前支持的语言有 Dart、SQL (Postgres) 和 YAML，但通过在 grammar 目录下添加新的语法文件，很容易扩展对其他语言的支持。

使用方法

初始化 Highlighter 类

在使用 Highlighter 类之前，需要对其进行初始化。初始化将加载请求的语法文件并解析它们。

// Initialize the highlighter.
await Highlighter.initialize(['dart', 'yaml', 'sql']);

加载主题并创建 Highlighter 实例

接下来，加载一个主题并创建一个 Highlighter 实例。

// Load the default light theme and create a highlighter.
var theme = await HighlighterTheme.loadLightTheme();
var highlighter = Highlighter(
  language: 'dart',
  theme: theme,
);

高亮显示代码

现在，可以通过调用 highlight 方法来高亮显示代码。highlight 方法将返回一个 TextSpan，可以在 Text 小部件中使用。

Widget build(BuildContext context) {
  var highlightedCode = highlighter.highlight(myCodeString);
  return Text.rich(highlightedCode);
}

示例中高亮显示的代码如下图所示：

完整示例 Demo

以下是一个完整的示例，展示了如何在 Flutter 应用中使用 syntax_highlight 插件来高亮显示不同语言的代码：

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:syntax_highlight/syntax_highlight.dart';

// Example code.
const _code = '''class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Syntax Highlight Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}''';

const _serverpodYaml = '''
class: Customer
table: customer
fields:
  name: String
  orders: List<Order>?, relation
''';

const _json = '{"name":"John", "age":30, "car":null}';

late final Highlighter _dartLightHighlighter;
late final Highlighter _dartDarkHighlighter;
late final Highlighter _serverpodProtocolLightYamlHighlighter;
late final Highlighter _serverpodProtocolDarkYamlHighlighter;
late final Highlighter _jsonLightHighlighter;
late final Highlighter _jsonDarkHighlighter;

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // Initialize the highlighter.
  await Highlighter.initialize([
    'dart',
    'yaml',
    'sql',
    'serverpod_protocol',
    'json',
  ]);

  // Load the default light theme and create a highlighter.
  var lightTheme = await HighlighterTheme.loadLightTheme();
  _dartLightHighlighter = Highlighter(
    language: 'dart',
    theme: lightTheme,
  );
  _serverpodProtocolLightYamlHighlighter = Highlighter(
    language: 'serverpod_protocol',
    theme: lightTheme,
  );
  _jsonLightHighlighter = Highlighter(
    language: 'json',
    theme: lightTheme,
  );

  // Load the default dark theme and create a highlighter.
  var darkTheme = await HighlighterTheme.loadDarkTheme();
  _dartDarkHighlighter = Highlighter(
    language: 'dart',
    theme: darkTheme,
  );
  _serverpodProtocolDarkYamlHighlighter = Highlighter(
    language: 'serverpod_protocol',
    theme: darkTheme,
  );
  _jsonDarkHighlighter = Highlighter(
    language: 'json',
    theme: darkTheme,
  );

  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Syntax Highlight Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: [
          Container(
            padding: const EdgeInsets.all(16),
            color: Colors.white,
            child: Text.rich(
              // Highlight the code.
              _dartLightHighlighter.highlight(_code),
              style: GoogleFonts.jetBrainsMono(
                fontSize: 14,
                height: 1.3,
              ),
            ),
          ),
          Container(
            padding: const EdgeInsets.all(16),
            color: Colors.black,
            child: Text.rich(
              // Highlight the code.
              _dartDarkHighlighter.highlight(_code),
              style: GoogleFonts.jetBrainsMono(
                fontSize: 14,
                height: 1.3,
              ),
            ),
          ),
          Container(
            padding: const EdgeInsets.all(16),
            color: Colors.white,
            child: Text.rich(
              // Highlight the code.
              _serverpodProtocolLightYamlHighlighter.highlight(_serverpodYaml),
              style: GoogleFonts.jetBrainsMono(
                fontSize: 14,
                height: 1.3,
              ),
            ),
          ),
          Container(
            padding: const EdgeInsets.all(16),
            color: Colors.black,
            child: Text.rich(
              // Highlight the code.
              _serverpodProtocolDarkYamlHighlighter.highlight(_serverpodYaml),
              style: GoogleFonts.jetBrainsMono(
                fontSize: 14,
                height: 1.3,
              ),
            ),
          ),
          Container(
            padding: const EdgeInsets.all(16),
            color: Colors.white,
            child: Text.rich(
              // Highlight the code.
              _jsonLightHighlighter.highlight(_json),
              style: GoogleFonts.jetBrainsMono(
                fontSize: 14,
                height: 1.3,
              ),
            ),
          ),
          Container(
            padding: const EdgeInsets.all(16),
            color: Colors.black,
            child: Text.rich(
              // Highlight the code.
              _jsonDarkHighlighter.highlight(_json),
              style: GoogleFonts.jetBrainsMono(
                fontSize: 14,
                height: 1.3,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

此示例展示了如何使用 syntax_highlight 插件在 Flutter 应用中高亮显示 Dart、YAML 和 JSON 代码，并且同时支持浅色和深色主题。希望这个例子能帮助你更好地理解和使用该插件。