markdown_widget - GitLite

KO | EN

gitlite — search

#python #react #llm #golang #go #android #machine-learning #macos #nodejs #java #kubernetes #ios #openai #open-source

markdown_widget

(★ 456)

📖Rendering markdown by flutter！Welcome for pr and issue.

파일 탐색기

최종 버전 다운로드 (.zip)

- - bug_report.md
  - feature_request.md
- - vars.json
- - build_android.yml
  - build_ios.yml
  - build_linux.yml
  - build_macos.yml
  - build_web.yml
  - build_windows.yml
  - coverage_action.yml
  - manual_build_all.yml
  - pr_check.yml
- .gitignore
- project.yml
- - .gitignore
  - build.gradle
  - gradle.properties
  - settings.gradle
- - demo_en.md
  - demo_zh.md
  - editor.md
  - html.md
  - html_description_en.md
  - html_description_zh.md
  - latex.md
  - latex_description_en.md
  - latex_description_zh.md
  - mermaid.md
  - mermaid_description_en.md
  - mermaid_description_zh.md
- - script_convert_asset.dart
  - sync_readme_to_demo.dart
- - .gitignore
- - main.dart
- - .gitignore
  - CMakeLists.txt
  - main.cc
  - my_application.cc
  - my_application.h
- - .gitignore
  - Podfile.lock
- - html_test.dart
  - latex_test.dart
  - script_convert_asset.dart
  - widget_test.dart
- - favicon.png
  - index.html
  - manifest.json
- - .gitignore
  - CMakeLists.txt
- .gitignore
- analysis_options.yaml
- devtools_options.yaml
- pubspec.yaml
- README.md
- - all.dart
  - autolink_no_leading_space_syntax.dart
  - configs.dart
  - extensions.dart
  - markdown_generator.dart
  - toc.dart
- - all.dart
  - markdown.dart
  - markdown_block.dart
  - proxy_rich_text.dart
  - span_node.dart
  - widget_visitor.dart
- markdown_widget.dart
- - generated_plugin_registrant.cc
  - generated_plugin_registrant.h
  - generated_plugins.cmake
- - GeneratedPluginRegistrant.swift
- screenshot.png
- sync_readme.bat
- sync_readme.sh
- - configs_test.dart
  - markdown_generator_test.dart
  - toc_test.dart
- - test.json
- - span_node_test.dart
- autolink_detailed_test.dart
- node_test.dart
- widget_test.dart
- widget_visitor_test.dart
- - generated_plugin_registrant.cc
  - generated_plugin_registrant.h
  - generated_plugins.cmake
.gitignore
analysis_options.yaml
CHANGELOG.md
CLAUDE.md
CONTRIBUTING.md
LICENSE
pubspec.yaml
README.md
README_JP.md
README_ZH.md

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

Language：[简体中文](https://github.com/asjqkkkk/markdown_widget/blob/master/README_ZH.md) | [English](https://github.com/asjqkkkk/markdown_widget/blob/master/README.md) | [日本語](https://github.com/asjqkkkk/markdown_widget/blob/master/README_JP.md)

![screen](https://github.com/asjqkkkk/asjqkkkk.github.io/assets/30992818/4185bf1a-0be3-460d-ba12-9e4764f5c035)

# 📖markdown_widget

[![Coverage Status](https://coveralls.io/repos/github/asjqkkkk/markdown_widget/badge.svg?branch=dev)](https://coveralls.io/github/asjqkkkk/markdown_widget?branch=dev) [![pub package](https://img.shields.io/pub/v/markdown_widget.svg)](https://pub.dartlang.org/packages/markdown_widget) [![demo](https://img.shields.io/badge/demo-online-brightgreen)](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));
```

## 📁 More Examples

For advanced usage examples, check out the [example/lib/markdown_custom](https://github.com/asjqkkkk/markdown_widget/tree/dev/example/lib/markdown_custom) folder in the repository:

- **video.dart** - Custom video tag support
- **latex.dart** - LaTeX math formula rendering
- **mermaid.dart** - Mermaid diagram support (flowcharts, sequence diagrams, etc.)
- **html_support.dart** - HTML tag extension
- **custom_node.dart** - Custom node implementation examples

These examples demonstrate how to extend the package with custom tags and features.

## 🌠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
---|---
<img src="https://user-images.githubusercontent.com/30992818/211159089-ec4acd11-ee02-46f2-af4f-f8c47eb28410.png" width=400> | <img src="https://user-images.githubusercontent.com/30992818/211159108-4c20de2d-fb1d-4bcb-b23f-3ceb91291661.png" width=400>

## 🔗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: <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),
      ]));
```

## 🧬Select All and Copy

Cross-platform support for Select All and Copy function.

![image](https://user-images.githubusercontent.com/30992818/226107076-f32a919e-9a0c-4138-8a0b-266c6337e0af.png)

## 🌐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)

## 🔷Mermaid diagram support

The example includes support for Mermaid diagrams, which can render flowcharts, sequence diagrams, state diagrams, and more. Refer to the implementation in [mermaid.dart](https://github.com/asjqkkkk/markdown_widget/blob/dev/example/lib/markdown_custom/mermaid.dart)

Features:
- Multiple diagram types (flowchart, sequence diagram, state diagram, ER diagram, etc.)
- Theme support (auto light/dark mode)
- Interactive display modes (code only, diagram only, or both)
- Fullscreen viewer with pan & zoom support
- Independent horizontal scrolling for wide diagrams
- Smart caching and debouncing for optimal performance

Here is the [online Mermaid demo showcase](https://asjqkkkk.github.io/markdown_widget/#/sample_mermaid)

```dart
import 'package:markdown_widget/markdown_widget.dart';
import 'markdown_custom/mermaid.dart';

// Basic usage
final isDark = Theme.of(context).brightness == Brightness.dark;
final preConfig = PreConfig(
  wrapper: createMermaidWrapper(
    config: const MermaidConfig(),
    isDark: isDark,
    preConfig: preConfig,
  ),
);

MarkdownWidget(
  data: markdown,
  config: config.copy(configs: [preConfig]),
)

// With custom configuration
final preConfig = PreConfig(
  wrapper: createMermaidWrapper(
    config: MermaidConfig(
      displayMode: MermaidDisplayMode.codeAndDiagram,
      diagramPadding: EdgeInsets.all(16.0),
      showLoadingIndicator: true,
    ),
    isDark: isDark,
    preConfig: preConfig,
  ),
);
```

## 🍑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.