markdown_widget 使用教程

markdown_widget 使用教程

markdown_widget📖Rendering markdown by flutter！Welcome for pr and issue.项目地址:https://gitcode.com/gh_mirrors/ma/markdown_widget

项目介绍

markdown_widget 是一个简单易用的 Markdown 渲染 Flutter 包。它支持 TOC（目录）功能、代码高亮，并且支持所有平台。该包由 morn fun 发布，提供了丰富的功能和灵活的配置选项，使得在 Flutter 应用中渲染 Markdown 内容变得非常方便。

项目快速启动

安装

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

dependencies:
  markdown_widget: ^2.3.2+6

然后运行 flutter pub get 获取依赖。

基本使用

以下是一个简单的示例，展示如何在 Flutter 应用中使用 markdown_widget 渲染 Markdown 内容：

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

class MarkdownPage extends StatelessWidget {
  final String data;

  MarkdownPage(this.data);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Markdown Widget'),
      ),
      body: Container(
        margin: EdgeInsets.all(10),
        child: MarkdownWidget(
          data: data,
        ),
      ),
    );
  }
}

代码高亮

markdown_widget 支持代码高亮，可以通过配置 PreConfig 来设置代码高亮的主题和语言：

import 'package:markdown_widget/config/highlight_themes.dart' as theme;

Widget buildMarkdown() => MarkdownWidget(
  data: data,
  styleConfig: StyleConfig(
    preConfig: PreConfig(
      language: 'java',
      theme: theme.a11yLightTheme,
    ),
  ),
);

应用案例和最佳实践

使用 TOC（目录）功能

markdown_widget 提供了 TOC 功能，可以轻松生成目录：

final TocController tocController = TocController();

Widget buildTocWidget() => TocListWidget(controller: tocController);

Widget buildMarkdown() => MarkdownWidget(
  data: data,
  controller: tocController,
);

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Row(
      children: <Widget>[
        Expanded(child: buildTocWidget()),
        Expanded(child: buildMarkdown(), flex: 3),
      ],
    ),
  );
}

自定义 Markdown 主题

可以通过 StyleConfig 来设置 Markdown 的主题：

Widget buildMarkdown() => MarkdownWidget(
  data: data,
  styleConfig: StyleConfig(
    markdownTheme: MarkdownTheme.lightTheme,
  ),
);

典型生态项目

markdown_widget 可以与其他 Flutter 包结合使用，例如：

• flutter_highlight: 用于代码高亮。
• scroll_to_index: 用于实现 TOC 的滚动定位。
• url_launcher: 用于处理 Markdown 中的链接。

这些包可以与 markdown_widget 一起使用，提供更完整的功能和更好的用户体验。

---

以上是 markdown_widget 的基本使用教程，希望对你有所帮助。更多详细信息可以参考项目的 GitHub 仓库。

markdown_widget📖Rendering markdown by flutter！Welcome for pr and issue.项目地址:https://gitcode.com/gh_mirrors/ma/markdown_widget