{"id":20695310,"url":"https://github.com/asjqkkkk/markdown_widget","last_synced_at":"2025-05-15T10:07:47.816Z","repository":{"id":50369034,"uuid":"254410166","full_name":"asjqkkkk/markdown_widget","owner":"asjqkkkk","description":"📖Rendering markdown by flutter！Welcome for pr and issue.","archived":false,"fork":false,"pushed_at":"2025-04-20T06:10:15.000Z","size":67115,"stargazers_count":367,"open_issues_count":44,"forks_count":103,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-04-21T18:47:51.312Z","etag":null,"topics":["dart","flutter","flutterweb","html","markdown","video"],"latest_commit_sha":null,"homepage":"","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/asjqkkkk.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-04-09T15:32:06.000Z","updated_at":"2025-04-20T06:08:07.000Z","dependencies_parsed_at":"2023-10-14T15:38:21.669Z","dependency_job_id":"155b8b8e-d0fd-4e7f-a8b6-26e810c77c43","html_url":"https://github.com/asjqkkkk/markdown_widget","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asjqkkkk%2Fmarkdown_widget","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asjqkkkk%2Fmarkdown_widget/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asjqkkkk%2Fmarkdown_widget/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asjqkkkk%2Fmarkdown_widget/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/asjqkkkk","download_url":"https://codeload.github.com/asjqkkkk/markdown_widget/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254319722,"owners_count":22051074,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dart","flutter","flutterweb","html","markdown","video"],"created_at":"2024-11-17T00:08:48.673Z","updated_at":"2025-05-15T10:07:42.803Z","avatar_url":"https://github.com/asjqkkkk.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"Language：[简体中文](https://github.com/asjqkkkk/markdown_widget/blob/master/README_ZH.md) | [English](https://github.com/asjqkkkk/markdown_widget/blob/master/README.md)\n\n![screen](https://github.com/asjqkkkk/asjqkkkk.github.io/assets/30992818/4185bf1a-0be3-460d-ba12-9e4764f5c035)\n\n# 📖markdown_widget\n\n[![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/)\n\nA simple and easy-to-use markdown rendering component.\n\n- Supports TOC (Table of Contents) function for quick location through Headings\n- Supports code highlighting\n- Supports all platforms\n\n## 🚀Usage\n\nBefore starting, you can try out the online demo by clicking [demo](https://asjqkkkk.github.io/markdown_widget/)\n\n```\nimport 'package:flutter/material.dart';\nimport 'package:markdown_widget/markdown_widget.dart';\n\nclass MarkdownPage extends StatelessWidget {\n  final String data;\n\n  MarkdownPage(this.data);\n\n  @override\n  Widget build(BuildContext context) =\u003e Scaffold(body: buildMarkdown());\n\n  Widget buildMarkdown() =\u003e MarkdownWidget(data: data);\n}\n```\nIf you want to use your own Column or other list widget, you can use `MarkdownGenerator`\n\n```\n  Widget buildMarkdown() =\u003e\n      Column(children: MarkdownGenerator().buildWidgets(data));\n```\n\nOr use `MarkdownBlock`\n\n```\n  Widget buildMarkdown() =\u003e\n      SingleChildScrollView(child: MarkdownBlock(data: data));\n```\n\n## 🌠Night mode\n\n`markdown_widget` supports night mode by default. Simply use a different `MarkdownConfig` to enable it.\n\n```\n  Widget buildMarkdown(BuildContext context) {\n    final isDark = Theme.of(context).brightness == Brightness.dark;\n    final config = isDark\n        ? MarkdownConfig.darkConfig\n        : MarkdownConfig.defaultConfig;\n    final codeWrapper = (child, text, language) =\u003e\n        CodeWrapperWidget(child, text, language);\n    return MarkdownWidget(\n        data: data,\n        config: config.copy(configs: [\n        isDark\n        ? PreConfig.darkConfig.copy(wrapper: codeWrapper)\n        : PreConfig().copy(wrapper: codeWrapper)\n    ]));\n  }\n```\n\nDefault mode | Night mode\n---|---\n\u003cimg src=\"https://user-images.githubusercontent.com/30992818/211159089-ec4acd11-ee02-46f2-af4f-f8c47eb28410.png\" width=400\u003e | \u003cimg src=\"https://user-images.githubusercontent.com/30992818/211159108-4c20de2d-fb1d-4bcb-b23f-3ceb91291661.png\" width=400\u003e\n\n\n## 🔗Link\n\nYou can customize the style and click events of links, like this\n\n```\n  Widget buildMarkdown() =\u003e MarkdownWidget(\n      data: data,\n      config: MarkdownConfig(configs: [\n        LinkConfig(\n          style: TextStyle(\n            color: Colors.red,\n            decoration: TextDecoration.underline,\n          ),\n          onTap: (url) {\n            ///TODO:on tap\n          },\n        )\n      ]));\n```\n\n## 📜TOC (Table of Contents) feature\n\nUsing the TOC is very simple\n\n```\n  final tocController = TocController();\n\n  Widget buildTocWidget() =\u003e TocWidget(controller: tocController);\n\n  Widget buildMarkdown() =\u003e MarkdownWidget(data: data, tocController: tocController);\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n        body: Row(\n          children: \u003cWidget\u003e[\n            Expanded(child: buildTocWidget()),\n            Expanded(child: buildMarkdown(), flex: 3)\n          ],\n        ));\n  }\n```\n\n## 🎈Highlighting  code\n\nHighlighting code supports multiple themes.\n\n```\nimport 'package:flutter_highlight/themes/a11y-light.dart';\n\n  Widget buildMarkdown() =\u003e MarkdownWidget(\n      data: data,\n      config: MarkdownConfig(configs: [\n        PreConfig(theme: a11yLightTheme),\n      ]));\n```\n\n## 🧬Select All and Copy\n\nCross-platform support for Select All and Copy function.\n\n![image](https://user-images.githubusercontent.com/30992818/226107076-f32a919e-9a0c-4138-8a0b-266c6337e0af.png)\n\n## 🌐Html tag\n\nAs 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.\n\nHere is the [online HTML demo showcase](https://asjqkkkk.github.io/markdown_widget/#/sample_html)\n\n## 🧮Latex support\n\nThe 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)\n\nHere is the [online latex demo showcase](https://asjqkkkk.github.io/markdown_widget/#/sample_latex)\n\n## 🍑Custom tag implementation\n\nBy 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.\n\nYou can also customize the parsing rules for Markdown strings using `InlineSyntax` and `BlockSyntax`, and generate new tags.\n\nYou can refer to [this issue](https://github.com/asjqkkkk/markdown_widget/issues/79) to learn how to implement a custom tag.\n\nIf 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).\n\n# 🧾Appendix\n\nHere are the other libraries used in `markdown_widget`\n\nPackages | Descriptions\n---|---\n[markdown](https://pub.dev/packages/markdown) | Parsing markdown data\n[flutter_highlight](https://pub.dev/packages/flutter_highlight) | Code highlighting\n[highlight](https://pub.dev/packages/highlight) | Code highlighting\n[url_launcher](https://pub.dev/packages/url_launcher) | Opening links\n[visibility_detector](https://pub.dev/packages/visibility_detector) | Listening for visibility of a widget;\n[scroll_to_index](https://pub.dev/packages/scroll_to_index) | Enabling ListView to jump to an index.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasjqkkkk%2Fmarkdown_widget","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fasjqkkkk%2Fmarkdown_widget","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasjqkkkk%2Fmarkdown_widget/lists"}