Flutter Markdown渲染插件flutter_myst_markdown的使用

Flutter Markdown渲染插件flutter_myst_markdown的使用

特性

  • BlockSyntax 子类化自 markdown。
  • MarkdownElementBuilder 子类化自 flutter_markdown。

使用方法

首先，需要导入必要的包：

import "package:flutter/material.dart";
import 'package:flutter_markdown/flutter_markdown.dart';
import 'package:flutter_myst_markdown/flutter_myst_markdown.dart';

接下来，定义一段 Markdown 文本：

const markdownText = """
This is a fenced code block:

```python
print("Hello, world!")

This is an executive code block:

1 + 2

“”";


然后，使用 `Markdown` 组件来渲染 Markdown 文本。注意，`ExecutiveCodeBuilder` 需要在如 `Scaffold`, `Card` 等 Material 包装器内使用：

```dart
Scaffold(
  body: Markdown(
    key: const Key("notebook-example"),
    data: markdownText,
    selectable: true,
    builders: {
      'code-cell': ExecutiveCodeBuilder(
          codeExecutingHandler: (input) async {
            return input;
          }
      ),
    },
    extensionSet: mystMarkdown
  )
)

你可以设置自己的 codeExecutingHandler。

示例代码

以下是完整的示例代码：

/// 样例项目入口

import 'package:flutter/material.dart';

import 'screens/home.dart';
import 'screens/executive_code.dart';

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

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

  // 这个小部件是你的应用的根组件
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Example APP for MyST Markdown',
      theme: ThemeData(
        // 这是你应用的主题
        primarySwatch: Colors.blue,
      ),
      routes: {
        '/': (BuildContext context) => const HomeScreen(),
        '/code': (BuildContext context) => const ExecutiveCodeScreen(),
      },
    );
  }
}

更多关于Flutter Markdown渲染插件flutter_myst_markdown的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


flutter_myst_markdown 是一个用于在 Flutter 应用中渲染 Markdown 内容的插件。它基于 flutter_markdown，但提供了更多的自定义选项和功能，特别是在处理复杂的 Markdown 语法时。

安装

首先，你需要在 pubspec.yaml 文件中添加 flutter_myst_markdown 依赖：

dependencies:
  flutter_myst_markdown: ^0.0.1  # 请查看最新版本

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

基本用法

flutter_myst_markdown 的使用非常简单。你只需要将 Markdown 字符串传递给 MystMarkdown 组件即可。

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

class MarkdownPage extends StatelessWidget {
  final String markdownData = '''
# 标题
这是一个 **加粗** 的文本。
- 项目1
- 项目2
  ''';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Markdown 示例'),
      ),
      body: SingleChildScrollView(
        child: MystMarkdown(data: markdownData),
      ),
    );
  }
}

自定义样式

flutter_myst_markdown 允许你自定义 Markdown 渲染的样式。你可以通过 styleSheet 参数来设置不同的样式。

MystMarkdown(
  data: markdownData,
  styleSheet: MystMarkdownStyleSheet(
    h1: TextStyle(fontSize: 24, fontWeight: FontWeight.bold, color: Colors.red),
    p: TextStyle(fontSize: 16, color: Colors.black),
    strong: TextStyle(fontWeight: FontWeight.bold, color: Colors.blue),
  ),
);

处理 Markdown 中的图片

flutter_myst_markdown 也支持渲染 Markdown 中的图片。你可以通过 onTapLink 和 imageBuilder 来处理链接和图片的点击事件。

MystMarkdown(
  data: markdownData,
  onTapLink: (url) {
    print('链接被点击: $url');
  },
  imageBuilder: (uri, title, alt) {
    return Image.network(uri.toString());
  },
);

处理数学公式

如果你需要在 Markdown 中渲染数学公式，flutter_myst_markdown 也支持 LaTeX 数学公式的渲染。你可以使用 math 扩展来启用数学公式支持。

MystMarkdown(
  data: markdownData,
  extensions: [MystMarkdownExtension.math],
);

处理自定义语法

flutter_myst_markdown 还允许你处理自定义的 Markdown 语法。你可以通过 extensionBuilder 来添加自定义的 Markdown 扩展。

MystMarkdown(
  data: markdownData,
  extensionBuilder: (context) => [
    MystMarkdownExtension.custom(
      syntax: CustomSyntax(),
      builder: (context, element) => CustomWidget(element),
    ),
  ],
);
回到顶部