Flutter Markdown转换插件markdown2html的使用

Flutter Markdown转换插件markdown2html的使用

markdown2html 是一个用于将 Markdown 转换为 HTML 的 Dart 库。

开始使用

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  markdown2html: any

然后运行 flutter pub get 命令以获取依赖库。

API

初始化

在应用启动时调用 markdownInit() 方法进行初始化：

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

将 Markdown 转换为 HTML

异步方法

import 'package:markdown2html/api/md.dart';

String html = await markdow2Html(str: "## hello world");

// 或者使用同步方法
String html = markdow2HtmlSync(str: "## hello world");

输出结果：

<h2>hello world</h2>

带选项的方法

你可以通过传递不同的选项来控制转换过程：

markdown2HtmlWithOptions(
  str: "## hello world",
  options: MkCompileOptions(),
  parseOptions: MkParseOptions(),
);

示例

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

import 'package:flutter/material.dart';
import 'package:markdown2html/api/md.dart';
import 'package:markdown2html/frb_generated.dart';
import 'dart:async';

import 'package:markdown2html/markdown2html.dart' as markdown2html;
import 'package:markdown2html/markdown2html.dart';

final _testmk1 = """
## hello world
""";

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

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final controller = TextEditingController(text: _testmk1);

  String html = "";
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Markdown to HTML'),
        ),
        body: SingleChildScrollView(
          padding: const EdgeInsets.all(12),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              TextField(
                controller: controller,
                maxLines: 10,
                minLines: 5,
                decoration: const InputDecoration(
                  helperText: "输入你的 Markdown 文本",
                ),
              ),
              ElevatedButton(
                onPressed: () async {
                  html = await markdow2Html(str: controller.text);
                  setState(() {});
                  debugPrint(html);
                  markdown2HtmlWithOptions(str: controller.text);
                },
                child: const Text("Markdown 转 HTML"),
              ),
              const Text('输出 HTML :'),
              Text(html),
            ],
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


在 Flutter 中，flutter_markdown 是一个常用的插件，用于将 Markdown 文本渲染为 Flutter 小部件。但如果你需要将 Markdown 转换为 HTML，可以使用 markdown 包，它允许你将 Markdown 文本转换为 HTML 字符串。

以下是如何使用 markdown 包将 Markdown 转换为 HTML 的步骤：

1. 添加依赖

首先，在你的 pubspec.yaml 文件中添加 markdown 包的依赖：

dependencies:
  flutter:
    sdk: flutter
  markdown: ^4.0.0  # 请检查最新版本

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

2. 使用 markdown 包转换 Markdown 为 HTML

import 'package:flutter/material.dart';
import 'package:markdown/markdown.dart' as md;

class MarkdownToHtmlPage extends StatelessWidget {
  final String markdownText = '''
# Hello, World!

This is a **bold** text and this is an *italic* text.

- List item 1
- List item 2

[Visit Flutter](https://flutter.dev)
  ''';

  String markdownToHtml(String markdown) {
    return md.markdownToHtml(markdown);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    String htmlContent = markdownToHtml(markdownText);

    return Scaffold(
      appBar: AppBar(
        title: Text('Markdown to HTML'),
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Text(htmlContent),
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: MarkdownToHtmlPage(),
  ));
}

3. 解释代码

  • markdownToHtml 函数使用 markdown 包中的 markdownToHtml 方法将 Markdown 文本转换为 HTML 字符串。
  • 在 build 方法中，我们将转换后的 HTML 字符串显示在 Text 小部件中。

4. 渲染 HTML

如果你需要将生成的 HTML 渲染为 Flutter 小部件，可以使用 flutter_html 包。首先在 pubspec.yaml 中添加 flutter_html 依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_html: ^2.0.0  # 请检查最新版本

然后使用 Html 小部件渲染 HTML：

import 'package:flutter/material.dart';
import 'package:markdown/markdown.dart' as md;
import 'package:flutter_html/flutter_html.dart';

class MarkdownToHtmlPage extends StatelessWidget {
  final String markdownText = '''
# Hello, World!

This is a **bold** text and this is an *italic* text.

- List item 1
- List item 2

[Visit Flutter](https://flutter.dev)
  ''';

  String markdownToHtml(String markdown) {
    return md.markdownToHtml(markdown);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    String htmlContent = markdownToHtml(markdownText);

    return Scaffold(
      appBar: AppBar(
        title: Text('Markdown to HTML'),
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Html(data: htmlContent),
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: MarkdownToHtmlPage(),
  ));
}
回到顶部