Flutter Markdown解析插件marked的使用

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

Flutter Markdown解析插件marked的使用

插件介绍

marked 是一个简单的Dart Markdown语法解析器，可以创建自定义Markdown语法。它支持基本的Markdown语法设置，并且可以应用于任何文本。

功能特点

  • 简单的Markdown语法设置
  • 通用的Markdown基础，适用于任何用例
  • 可以将Markdown应用到任何文本中
  • 使用占位符来修改输入

开始使用

首先通过 pub 安装 marked 包：

dart pub add marked

然后导入该包：

import 'package:marked/marked.dart';

使用示例

创建一个包含所有需要使用的占位标的Markdown实例，然后使用 apply 方法解析Markdown语法。

import 'package:marked/marked.dart';

// 创建Markdown实例并定义占位标
final markdown = Markdown.map({
  '**': (text, match) => '<b>$text</b>', // 加粗
  '*': (text, match) => '<i>$text</i>',  // 斜体
  '__': (text, match) => '<u>$text</u>', // 下划线
});

void main() {
  // 应用Markdown解析
  print(
    markdown.apply('''
      Hello **World**!
      __Looks *pretty* easy__
    ''')
  );

  // 输出：
  //   Hello <b>World</b>!
  //   <u>Looks <i>pretty</i> easy</u>
}

占位标

占位标是用于创建Markdown语法的模块化元素，它们用于替换匹配特定模式的文本部分。

// 使用正则表达式创建占位标
MarkdownPlaceholder(RegExp(r'\*\*(.*?)\*\*'), (text, match) => '<b>$text</b>');

为了简化创建占位标的过程，提供了一些预定义的方法：

// 封闭式占位标
MarkdownPlaceholder.enclosed('**', (text, match) => '<b>$text</b>');
// Hello **World**! -> Hello <b>World</b>!

// 标签占位标
MarkdownPlaceholder.tag('strong', (text, match) => '<b>$text</b>');
// Hello <strong>World</strong>! -> Hello <b>World</b>!

// 正则表达式占位标
MarkdownPlaceholder.regexp(r'\*\*(.*?)\*\*', (text, match) => '<b>$text</b>');
// Hello **World**! -> Hello <b>World</b>!

占位标映射

可以通过 Markdown.map() 方法将一组条目转换为占位标：

final htmlMarkdown = Markdown({
  MarkdownPlaceholder.enclosed('**', (text, match) => '<b>$text</b>'),
  MarkdownPlaceholder.enclosed('*', (text, match) => '<i>$text</i>'),
  MarkdownPlaceholder.enclosed('~~', (text, match) => '<strike>$text</strike>'),
  MarkdownPlaceholder.enclosed('`', (text, match) => '<code>$text</code>'),
});

void main() {
  print(htmlMarkdown.apply('HTML Markdown: **bold** *italic* ~~strike~~ `code`'));
  
  // 输出：
  //   HTML Markdown: <b>bold</b> <i>italic</i> <strike>strike</strike> <code>code</code>
}

示例代码

下面是一个更复杂的示例，展示如何使用不同的占位标和自定义标签：

import 'package:marked/marked.dart';

final markdown = Markdown.map({
  '**': (text, match) => '<b>$text</b>',
  '*': (text, match) => '<i>$text</i>',
  '***': (text, match) => '<i>$text</i>',
  '__': (text, match) => '<u>$text</u>',
  '<custom>': (text, match) => '<tag>$text</tag>',
}, placeholders: {
  MarkdownPlaceholder.enclosed(
      'from here', end: 'to here', (text, match) => '[$text]'),
});

void main() {
  print(markdown.apply('''
      Hello **World**!
      __Looks *pretty* easy__ 
      <custom>Custom tags</custom>
      from here ... do anything ... to here
    '''));

  // 输出：
  //   Hello <b>World</b>!
  //   <u>Looks <i>pretty</i> easy</u>
  //   <tag>Custom tags</tag>
  //   [ ... do anything ... ]
}

占位标类型

不同类型的占位标及其描述如下：

类型 描述 前缀 符号
Normal 默认占位标，通常是封闭式的 normal: None
Enclosed 开始和结束使用相同的标记，如 * enclosed: None
Basic 单个标记占位标 basic: None
Sticky 同封闭式，但标记必须紧邻字符 sticky: [...]
Split 分割开始标记，如 /* | */ split: ... | ...
RegExp 匹配正则表达式，text 是第一个捕获组 regexp: /.../
Tag 类似HTML标签 <tag> 和 </tag> tag: <...>

转义

要转义占位标，可以使用 \ 字符。也可以手动转义和取消转义输入：

// 手动转义和取消转义
markdown.escape(input);
markdown.unescape(input);

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

Harmonyos Next教程
1 回复

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


在Flutter中，使用Markdown解析插件marked（尽管通常Flutter社区更常用flutter_markdown插件，但这里我们按照要求讨论marked，尽管它更多用于Node.js环境，因此我们将通过平台通道来整合它或使用类似功能的Dart库）可以通过以下步骤实现。不过需要注意的是，由于marked是一个Node.js库，直接在Flutter中使用它需要通过平台通道（Platform Channels）来实现，或者我们可以寻找一个纯Dart实现的Markdown解析库。

由于直接在Flutter中使用marked并不常见且较为复杂，这里提供一个使用flutter_markdown插件的示例，它是Flutter社区广泛接受的一个Markdown解析库。如果你坚持使用marked，你将需要设置Node.js服务器并通过网络请求来解析Markdown，这不是最佳实践，因此这里不展开说明。

使用flutter_markdown插件的示例

  1. 添加依赖

    在你的pubspec.yaml文件中添加flutter_markdown依赖：

    dependencies:
  flutter:
    sdk: flutter
  flutter_markdown: ^0.x.x  # 使用最新版本，请检查pub.dev上的最新版本号

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

  2. 使用Markdown插件

    在你的Flutter应用中，你可以这样使用flutter_markdown：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Markdown Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Markdown Demo'),
        ),
        body: Center(
          child: MarkdownBody(
            data: """
              # Hello, Markdown!
              
              This is an *italic* and this is a **bold** text.

              - Item 1
              - Item 2
              - Item 3

              [Link to Google](https://www.google.com)
              """,
            styleSheet: MarkdownStyleSheet.default,
          ),
        ),
      ),
    );
  }
}

    在这个示例中，我们创建了一个简单的Flutter应用，其中包含一个使用MarkdownBody解析和显示Markdown内容的页面。

注意事项

  • flutter_markdown插件提供了良好的Markdown支持，并且易于集成到Flutter应用中。
  • 如果你确实需要使用marked或其他Node.js库，你可能需要设置一个后端服务，通过API调用将Markdown转换为HTML，然后在Flutter前端显示转换后的HTML。这种方法增加了复杂性，通常不推荐，除非有特定的需求。

通过上述方法，你可以在Flutter应用中轻松实现Markdown的解析和显示。

回到顶部