Flutter Markdown渲染插件markdown_viewer的使用

Markdown Viewer

一个用于Flutter的Markdown查看器小部件。它可以将Markdown字符串渲染为富文本输出。

查看此截图的源代码 这里

使用方法

以下是一个简单的Markdown Viewer组件的使用示例：

MarkdownViewer(
  'Hello **Markdown**!',
  enableTaskList: true,
  enableSuperscript: false,
  enableSubscript: false,
  enableFootnote: false,
  enableImageSize: false,
  enableKbd: false,
  syntaxExtensions: const [],
  elementBuilders: const [],
);

如何创建语法扩展

下面是一个创建自定义语法扩展的示例：

class ExampleSyntax extends MdInlineSyntax {
  ExampleSyntax() : super(RegExp(r'#[^#]+?(?=\s+|$)'));

  [@override](/user/override)
  MdInlineObject? parse(MdInlineParser parser, Match match) {
    final markers = [parser.consume()];
    final content = parser.consumeBy(match[0]!.length - 1);

    return MdInlineElement(
      'example',
      markers: markers,
      children: content.map((e) => MdText.fromSpan(e)).toList(),
    );
  }
}

如何创建元素构建器

下面是一个创建自定义元素构建器的示例：

class ExampleBuilder extends MarkdownElementBuilder {
  ExampleBuilder()
      : super(
          textStyle: const TextStyle(
            color: Colors.green,
            decoration: TextDecoration.underline,
          ),
        );

  [@override](/user/override)
  bool isBlock(element) => false;

  [@override](/user/override)
  List<String> matchTypes = ['example'];
}

完整示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中使用Markdown Viewer组件：

// ignore_for_file: avoid_print

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter_prism/flutter_prism.dart';
import 'package:markdown_viewer/markdown_viewer.dart';

import 'extension.dart';

const markdown = r'''
## Markdown example

Hello **Markdown**!

### Highlights

- [x] ==100%== conform to CommonMark.
- [x] ==100%== conform to GFM.
- [x] Easy to implement syntax **highlighting**, for example `flutter_prism`:
   ```dart
   // Dart language.
   void main() {
     print('Hello, World!');
   }

• [x] Easy to custom, for example: > This is a #custom_extension

Dependencies

‘’’;

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

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

@override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData.light(), darkTheme: ThemeData.dark(), title: ‘MarkdownViewer Demo’, debugShowCheckedModeBanner: false, home: const MyHomePage(), scrollBehavior: CustomScrollBehavior(), ); } }

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

@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text(‘MarkdownViewer Demo’)), body: SingleChildScrollView( padding: const EdgeInsets.all(20), child: MarkdownViewer( markdown, enableTaskList: true, enableSuperscript: false, enableSubscript: false, enableFootnote: false, enableImageSize: false, enableKbd: false, syntaxExtensions: [ExampleSyntax()], highlightBuilder: (text, language, infoString) { final prism = Prism( mouseCursor: SystemMouseCursors.text, style: Theme.of(context).brightness == Brightness.dark ? const PrismStyle.dark() : const PrismStyle(), ); return prism.render(text, language ?? ‘plain’); }, onTapLink: (href, title) { print({href, title}); }, elementBuilders: [ ExampleBuilder(), ], styleSheet: const MarkdownStyle( listItemMarkerTrailingSpace: 12, codeSpan: TextStyle( fontFamily: ‘RobotoMono’, ), codeBlock: TextStyle( fontSize: 14, letterSpacing: -0.3, fontFamily: ‘RobotoMono’, ), ), ), ), ); } }

class CustomScrollBehavior extends MaterialScrollBehavior { @override Set<PointerDeviceKind> get dragDevices => { PointerDeviceKind.touch, PointerDeviceKind.mouse, }; }