markdown_widget 2.0.0

A new markdown package. It supports TOC function, code highlighting, and it supports all platforms

🚀 The markdown_widget 2.0 has now been released. The entire code has been completely redesigned according to the CommonMark Spec 3.0 compared to the 1.x versions. This brings a lot of breaking changes, but also more standardized markdown rendering logic and more robust and scalable code

Language：简体中文 | English

📖markdown_widget

A simple and easy-to-use markdown rendering component.

• Supports TOC (Table of Contents) function for quick location through Headings
• Supports code highlighting
• Supports all platforms

🚀Usage

Before starting, you can try out the online demo by clicking demo

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) => Scaffold(body: buildMarkdown());

  Widget buildMarkdown() => MarkdownWidget(data: data);
}

If you want to use your own Column or other list widget, you can use MarkdownGenerator

  Widget buildMarkdown() =>
      Column(children: MarkdownGenerator().buildWidgets(data));

🌠Night mode

markdown_widget supports night mode by default. Simply use a different MarkdownConfig to enable it.

  Widget buildMarkdown(BuildContext context) {
    final isDark = Theme.of(context).brightness == Brightness.dark;
    return MarkdownWidget(
        data: data,
        config:
            isDark ? MarkdownConfig.darkConfig : MarkdownConfig.defaultConfig);
  }

Default mode	Night mode

🔗Link

You can customize the style and click events of links, like this

  Widget buildMarkdown() => MarkdownWidget(
      data: data,
      config: MarkdownConfig(configs: [
        LinkConfig(
          style: TextStyle(
            color: Colors.red,
            decoration: TextDecoration.underline,
          ),
          onTap: (url) {
            ///TODO:on tap
          },
        )
      ]));

📜TOC (Table of Contents) feature

Using the TOC is very simple

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

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

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

🎈Highlighting code

Highlighting code supports multiple themes.

import 'package:flutter_highlight/themes/a11y-light.dart';

  Widget buildMarkdown() => MarkdownWidget(
      data: data,
      config: MarkdownConfig(configs: [
        PreConfig(theme: a11yLightTheme, language: 'dart'),
      ]));

🌐HTML tags

The current package only implements the conversion of Markdown tags, so it does not support the conversion of HTML tags by default. However, you can extend the package to support this feature by using the html_support

🍑Custom tag implementation

By passing a SpanNodeGeneratorWithTag to MarkdownGeneratorConfig, you can add new tags and the corresponding SpanNodes for those tags. You can also use existing tags to override the corresponding SpanNodes.

You can also customize the parsing rules for Markdown strings using InlineSyntax and BlockSyntax, and generate new tags.

You can refer to the usage of SpanNodeGeneratorWithTag in video.dart for an example.

If you have any good ideas or suggestions, or have any issues using this package, please feel free to open a pull request or issue.

🧾Appendix

Here are the other libraries used in markdown_widget

Packages	Descriptions
markdown	Parsing markdown data
flutter_highlight	Code highlighting
highlight	Code highlighting
url_launcher	Opening links
visibility_detector	Listening for visibility of a widget;
scroll_to_index	Enabling ListView to jump to an index.