Flutter Markdown渲染插件delta_markdown的使用

delta_markdown 是一个用Dart编写的便携式Markdown库，它可以在Markdown和Delta之间进行转换。需要注意的是，当前这个转换器尚未准备好用于生产环境。

使用方法

以下是如何在Flutter项目中使用 delta_markdown 的示例：

示例代码

import 'package:delta_markdown/delta_markdown.dart';

void main() {
  const markdown = 'Hello **Markdown**';
  print(markdownToDelta(markdown));

  const delta = r'[{"insert":"Hello "},{"insert":"Markdown","attributes":{"bold":true}},{"insert":"\n"}]';
  print(deltaToMarkdown(delta));
}

在这个示例中，我们首先将一段简单的Markdown文本转换为Delta格式，然后将Delta格式转换回Markdown文本。

支持的元素

目前，该库支持以下Markdown元素：

• 粗体（Bold）
• 斜体（Italic）
• 链接（Link）
• 引用（Blockquote）
• 标题（Header）
• 列表（List）
• 代码块（Code Block）
• 图片（Image）
• 水平线（Horizontal Rule）

不支持的元素包括：

• 背景颜色（Background Color）
• 文字颜色（Color）
• 字体（Font）
• 大小（Size）
• 删除线（Strikethrough）
• 上标/下标（Superscript/Subscript）
• 下划线（Underline）
• 文本对齐（Text Alignment）
• 文本方向（Text Direction）
• 公式（Formula）
• 视频（Video）

由于 flutter_quill 不支持的原因，以下元素也不被支持：

• 内联代码（Inline Code）

已知限制

需要实现的支持功能包括：

• 缩进（Indent）

目前只有少量测试，因此在复杂情况下功能尚不能保证。

完整示例Demo

下面是一个完整的Flutter应用示例，演示如何使用 delta_markdown 插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Delta Markdown Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _markdown = 'Hello **Markdown**';
  String _delta;
  String _convertedMarkdown;

  @override
  void initState() {
    super.initState();
    _convertMarkdownToDelta();
  }

  void _convertMarkdownToDelta() {
    setState(() {
      _delta = markdownToDelta(_markdown);
      _convertedMarkdown = deltaToMarkdown(_delta);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Delta Markdown Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text('Original Markdown:'),
            Text(_markdown),
            SizedBox(height: 20),
            Text('Converted Delta:'),
            Text(_delta ?? ''),
            SizedBox(height: 20),
            Text('Converted Back to Markdown:'),
            Text(_convertedMarkdown ?? ''),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _convertMarkdownToDelta,
        tooltip: 'Convert',
        child: Icon(Icons.refresh),
      ),
    );
  }
}

此示例展示了如何将Markdown文本转换为Delta格式，并再次转换回Markdown文本，通过按钮可以重新执行转换操作。