Flutter Markdown语法高亮插件markdown_syntax_highlighter的使用

发布于 1周前 作者 htzhanglong 来自 Flutter

Flutter Markdown语法高亮插件markdown_syntax_highlighter的使用

syntax highlighter for show your code in the app

如何使用它

步骤 2

在你的文件中添加代码:

String _exampleCode =
      "class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; [@override](/user/override) _MyHomePageState createState() => _MyHomePageState();}";

步骤 3

build方法中添加SyntaxHighlighterStyle

final SyntaxHighlighterStyle style =
        Theme.of(context).brightness == Brightness.dark
            ? SyntaxHighlighterStyle.darkThemeStyle()
            : SyntaxHighlighterStyle.lightThemeStyle();

步骤 4

添加此代码以展示语法高亮效果:

RichText(
  text: TextSpan(
    style: const TextStyle(fontFamily: 'monospace', fontSize: 10.0),
    children: <TextSpan>[
      DartSyntaxHighlighter(style).format(_exampleCode),
    ],
  ),
)

完整示例

以下是完整的示例代码:

import 'package:flutter/material.dart';
import 'package:markdown_syntax_highlighter/markdown_syntax_highlighter.dart';

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

class MyApp extends StatelessWidget {
  // 这个小部件是你的应用的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '语法高亮器示例',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: '语法高亮器示例'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _exampleCode =
      "class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; [@override](/user/override) _MyHomePageState createState() =&gt; _MyHomePageState();}";

  [@override](/user/override)
  Widget build(BuildContext context) {
    final SyntaxHighlighterStyle style =
        Theme.of(context).brightness == Brightness.dark
            ? SyntaxHighlighterStyle.darkThemeStyle()
            : SyntaxHighlighterStyle.lightThemeStyle();
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: RichText(
            text: TextSpan(
              style: const TextStyle(fontFamily: 'monospace', fontSize: 10.0),
              children: <TextSpan>[
                DartSyntaxHighlighter(style).format(_exampleCode),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

更多关于Flutter Markdown语法高亮插件markdown_syntax_highlighter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter Markdown语法高亮插件markdown_syntax_highlighter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,下面是一个关于如何在Flutter中使用markdown_syntax_highlighter插件来实现Markdown语法高亮的示例代码。这个插件允许你在Flutter应用中显示带有语法高亮的Markdown内容。

首先,确保你已经在pubspec.yaml文件中添加了markdown_syntax_highlighter依赖:

dependencies:
  flutter:
    sdk: flutter
  markdown: ^4.0.0  # 确保markdown版本兼容
  markdown_syntax_highlighter: ^0.5.0  # 检查最新版本号

然后,运行flutter pub get来安装依赖。

接下来,你可以在你的Flutter应用中使用以下代码来显示带有语法高亮的Markdown内容:

import 'package:flutter/material.dart';
import 'package:markdown/markdown.dart' as md;
import 'package:flutter_markdown/flutter_markdown.dart';
import 'package:markdown_syntax_highlighter/markdown_syntax_highlighter.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Markdown Syntax Highlighter Example'),
        ),
        body: MarkdownSyntaxHighlighterExample(),
      ),
    );
  }
}

class MarkdownSyntaxHighlighterExample extends StatelessWidget {
  final String markdownData = """
\`\`\`dart
void main() {
  print('Hello, World!');
}
\`\`\`

This is a Dart code block above.
  """;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Markdown(
        data: markdownData,
        styleSheet: MarkdownStyleSheet.fromTheme(Theme.of(context)).copyWith(
          codeBlockTheme: CodeBlockTheme(
            baseStyle: TextStyle(fontSize: 14, color: Colors.blue),
            keywordStyle: TextStyle(color: Colors.green),
            stringStyle: TextStyle(color: Colors.red),
            functionStyle: TextStyle(fontWeight: FontWeight.bold),
          ),
        ),
        syntaxHighlighter: createDartSyntaxHighlighter(),
        extensionSet: md.ExtensionSet.fromBlockSyntaxes([
          ...md.allBlockSyntaxes,
          // Add any custom block syntaxes if needed
        ]).addInlineSyntaxes([
          ...md.allInlineSyntaxes,
          // Add any custom inline syntaxes if needed
        ]),
      ),
    );
  }

  SyntaxHighlighter createDartSyntaxHighlighter() {
    return DartSyntaxHighlighter(
      keywordPattern: RegExp(
        r'\b(abstract|as|assert|async|await|break|case|catch|class|const|continue|covariant|default|deferred|do|dynamic|else|enum|extends|external|factory|false|final|finally|flutter|for|Function|get|if|implements|import|in|is|is!\b|interface|let|library|native|new|null|operator|part|rethrow|return|set|show|static|super|switch|sync\*|this|throw|true|try|typedef|var|void|while|with|yield)\b',
      ),
      stringPattern: RegExp(r"'([^'\\]|\\.)*'|"r'"([^"\\]|\\.)*"'),
      functionPattern: RegExp(r'[a-zA-Z_]\w*(\s*\([^)]*\))?'),
    );
  }
}

在这个示例中,我们创建了一个简单的Flutter应用,其中包含一个Markdown内容,该内容包含一个Dart代码块。我们使用Markdown小部件来显示Markdown内容,并通过syntaxHighlighter属性传递一个DartSyntaxHighlighter实例来实现语法高亮。

DartSyntaxHighlighter类使用正则表达式来匹配关键字、字符串和函数名,并为它们应用不同的样式。你可以根据需要调整这些正则表达式和样式。

请注意,markdown_syntax_highlighter插件的具体用法和API可能会随着版本的更新而变化,因此请查阅最新的官方文档以获取最准确的信息。

回到顶部