Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/asjqkkkk/markdown_widget
📖Rendering markdown by flutter！Welcome for pr and issue.
https://github.com/asjqkkkk/markdown_widget
dart flutter flutterweb html markdown video
Last synced: about 9 hours ago
JSON representation
📖Rendering markdown by flutter！Welcome for pr and issue.
- Host: GitHub
- URL: https://github.com/asjqkkkk/markdown_widget
- Owner: asjqkkkk
- License: mit
- Created: 2020-04-09T15:32:06.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-12-10T12:35:46.000Z (12 days ago)
- Last Synced: 2024-12-10T13:34:19.327Z (12 days ago)
- Topics: dart, flutter, flutterweb, html, markdown, video
- Language: Dart
- Homepage:
- Size: 59.5 MB
- Stars: 333
- Watchers: 8
- Forks: 95
- Open Issues: 36
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
Language：[简体中文](https://github.com/asjqkkkk/markdown_widget/blob/master/README_ZH.md) | [English](https://github.com/asjqkkkk/markdown_widget/blob/master/README.md)
# 📖markdown_widget
[](https://coveralls.io/github/asjqkkkk/markdown_widget?branch=dev) [](https://pub.dartlang.org/packages/markdown_widget) [](https://asjqkkkk.github.io/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](https://asjqkkkk.github.io/markdown_widget/)
```
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));
```
Or use `MarkdownBlock`
```
Widget buildMarkdown() =>
SingleChildScrollView(child: MarkdownBlock(data: 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;
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)
]));
}
```
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
```
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: [
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),
]));
```
## 🧬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](https://github.com/asjqkkkk/markdown_widget/blob/dev/example/lib/markdown_custom/html_support.dart) for more details.
Here is the [online HTML demo showcase](https://asjqkkkk.github.io/markdown_widget/#/sample_html)
## 🧮Latex support
The example also includes simple support for LaTeX, which can be implemented by referring to the implementation in [latex.dart](https://github.com/asjqkkkk/markdown_widget/blob/dev/example/lib/markdown_custom/latex.dart)
Here is the [online latex demo showcase](https://asjqkkkk.github.io/markdown_widget/#/sample_latex)
## 🍑Custom tag implementation
By passing a `SpanNodeGeneratorWithTag` to `MarkdownGeneratorConfig`, you can add new tags and the corresponding `SpanNode`s for those tags. You can also use existing tags to override the corresponding `SpanNode`s.
You can also customize the parsing rules for Markdown strings using `InlineSyntax` and `BlockSyntax`, and generate new tags.
You can refer to [this issue](https://github.com/asjqkkkk/markdown_widget/issues/79) 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](https://github.com/asjqkkkk/markdown_widget).
# 🧾Appendix
Here are the other libraries used in `markdown_widget`
Packages | Descriptions
---|---
[markdown](https://pub.dev/packages/markdown) | Parsing markdown data
[flutter_highlight](https://pub.dev/packages/flutter_highlight) | Code highlighting
[highlight](https://pub.dev/packages/highlight) | Code highlighting
[url_launcher](https://pub.dev/packages/url_launcher) | Opening links
[visibility_detector](https://pub.dev/packages/visibility_detector) | Listening for visibility of a widget;
[scroll_to_index](https://pub.dev/packages/scroll_to_index) | Enabling ListView to jump to an index.