Flutter Markdown解析插件standard_markdown的使用

standard_markdown 是一个支持 GFM（GitHub Flavored Markdown）和 CommonMark 标准的 Flutter 包。

如何使用

首先，确保你已经添加了 standard_markdown 包到你的 pubspec.yaml 文件中：

dependencies:
  standard_markdown: ^版本号

然后，你可以使用以下代码来初始化并使用 StandardMarkdown 组件：

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

// 初始化 Markdown 数据控制器
TextEditingController editingController = TextEditingController(text: markdown);

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(),
    );
  }
}

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: StandardMarkdown(
        oninit: (config) {
          // 在组件初始化时设置光标位置
          editingController.selection = TextSelection.fromPosition(const TextPosition(offset: 0));
        },
        mode: 0, // 0 表示即时渲染模式
        toolbar: true, // 显示工具栏
        selectable: true, // 文本可选
        data: editingController, // 控制 Markdown 数据的控制器
      ),
    );
  }
}

支持的编辑模式

• ❌ 即时渲染模式 (ir)
• ✅ 分屏模式 (sv)

支持的 CommonMark 语法

• ✅ 分割线
• ✅ 代码块（支持语法高亮）
• ❌ HTML 块（XSS 过滤）
• ✅ 链接
• ✅ 引用
• ✅ 段落
• ✅ 列表
• ✅ 反斜杠转义
• ✅ 斜体
• ✅ 粗体
• ✅ 图像
• ✅ 文本内容

支持的 GFM 语法

• ✅ 表格
• ✅ 任务列表项（未处理点击改变状态）
• ✅ 删除线
• ✅ 自动链接

其他功能

• ❌ 注脚
• ❌ 搜索
• ✅ 格式化 Markdown
• ❌ 目录
• ✅ LaTeX/KaTeX
• ❌ ECharts
• ✅ 使用简单
• ✅ 工具栏
• ✅ 一个控制器控制所有
• ✅ 在 Material 3 中可选

完整示例代码

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

const markdown = r'''
# 我是标题 _sd_

## 我是副标题 $dsda$

### 我是三级标题

#### 我是四级标题

##### 我是五级标题

###### 我是六级标题

```dart
class MarkdownHelper {
  Map<String, Widget> getTitleWidget(m.Node node) => title.getTitleWidget(node);
  Widget getPWidget(m.Element node) => p.getPWidget(node);
  Widget getPreWidget(m.Node node) => pre.getPreWidget(node);
}

斜体文字

粗体文字

我是代码

删除线

斜体、粗体和删除线

测试引用文本和 粗体

• 无序列表
• 一项
  • 子项 a a
  • 子项 bbbb
    • 子子项 CCCC

1. 有序列表
2. 一项
3. 二项
   1. 子项 AAAA
   2. 子项 BBBB
   3. 子项 CCCC

• [ ] 我是 复选框
• [X] 我也是 复选框

测试分割线:

测试表格:

Markdown 示例

Hello Markdown!

特点

• [X] 符合 100% CommonMark。

• [X] 符合 100% GFM。

  // Dart 代码示例
  void main() {
    print('Hello, World!');
  }
  

多国语言测试

اختبار متعدد اللغات

다국어 테스트

多言語テスト

这是一篇讲解如何正确使用 Markdown 的排版示例，学会这个很有必要，能让你的文章有更佳清晰的排版。

引用文本：Markdown 是一种灵感来自文本的格式化语法

语法指导

普通内容

这段内容展示了在内容里面一些排版格式，比如：

• 加粗 - **加粗**
• 倾斜 - *倾斜*
• ~删除线~ - ~~删除线~~
• Code 标记 - Code 标记
• 超级链接 - [超级链接](https://ld246.com)
• username@gmail.com - [username@gmail.com](mailto:username@gmail.com)

表情符号 Emoji

支持大部分标准的表情符号，可使用输入法直接输入。

一些表情例子

😄 😆 😵 😭 😰 😅 😢 😤 😍 😌 👍 👎 💯 👏 🔔 🎁 ❓ 💣 ❤️ ☕️ 🌀 🙇 💋 🙏 💢

大标题 - Heading 3

你可以选择使用 H1 至 H6，使用 ##(N) 打头。建议帖子或回帖中的顶级标题使用 Heading 3，不要使用 1 或 2，因为 1 是系统站点级，2 是帖子标题级。

注意: 别忘了 # 后面需要有空格！

Heading 4

Heading 5

Heading 6

图片

普通代码块

语法高亮支持

如果在 ``` 后面跟随语言名称，可以有语法高亮的效果哦，比如:

演示 Go 代码高亮

package main

import "fmt"

funcmain() {
	fmt.Println("Hello, 世界");
}

演示 Java 高亮

public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello World!");
    }
}

提示: 语言名称支持下面这些: ruby, python, js, html, erb, css, coffee, bash, json, yml, xml …

有序、无序、任务列表

无序列表

• Java
  • Spring
    • IoC
    • AOP
• Go
  • gofmt
  • Wide
• Node.js
  • Koa
  • Express

有序列表

1. Node.js
   1. Express
   2. Koa
   3. Sails
2. Go
   1. gofmt
   2. Wide
3. Java
   1. Latke
   2. IDEA

任务列表

• [X] 发布 Sym
• [X] 发布 Solo
• [ ] 预约牙医

表格

如果需要展示数据什么的，可以选择使用表格。

段落

空行可以将内容进行分段，便于阅读。（这是第一段）

使用空行在 Markdown 排版中相当重要。（这是第二段）

链接引用

链接文本

数学公式

多行公式块：

$$ 123123\pm $$

行内公式：

公式$Em^2$是行内。

复杂使用