markdown_widget

Description:

markdown widget

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);
}
copied to clipboard
If you want to use your own Column or other list widget, you can use MarkdownGenerator
Widget buildMarkdown() =>
Column(children: MarkdownGenerator().buildWidgets(data));
copied to clipboard
Or use MarkdownBlock
Widget buildMarkdown() =>
SingleChildScrollView(child: MarkdownBlock(data: data));
copied to clipboard
🌠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;
final config = isDark
? MarkdownConfig.darkConfig
: MarkdownConfig.defaultConfig;
final codeWrapper = (child, text, language) =>
CodeWrapperWidget(child, text, language);
return MarkdownWidget(
data: data,
config: config.copy(configs: [
isDark
? PreConfig.darkConfig.copy(wrapper: codeWrapper)
: PreConfig().copy(wrapper: codeWrapper)
]));
}
copied to clipboard



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
},
)
]));
copied to clipboard
📜TOC (Table of Contents) feature #
Using the TOC is very simple
final tocController = TocController();

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)
],
));
}
copied to clipboard
🎈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),
]));
copied to clipboard
🧬Select All and Copy #
Cross-platform support for Select All and Copy function.

🌐Html tag #
As the current package only implements the conversion of Markdown tags, it does not support the conversion of HTML tags by default. However, this functionality can be supported through extension. You can refer to the usage in html_support.dart for more details.
Here is the online HTML demo showcase
🧮Latex support #
The example also includes simple support for LaTeX, which can be implemented by referring to the implementation in latex.dart
Here is the online latex demo showcase
🍑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 this issue to learn how to implement a custom tag.
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.