markdown_widget 1.0.0

markdown widget support TOC、video、highlight code...

Language:简体中文|English

markdown_widget

A simple and easy-to-use markdown package created by flutter.

• Support TOC
• Support img and Video Tags of HTML
• Support highlight code

Getting Started

Before the introduction, you can have a try for Online Demo

Useage

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) {
    return Scaffold(
      body: Container(
        margin: EdgeInsets.all(10),
        child: buildMarkdown(),
      ),
    );
  }

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

Image and Video

if you want to custom a widget, such as Image and Video:

  Widget buildMarkdown() => MarkdownWidget(
        data: data,
        styleConfig: StyleConfig(
          imgBuilder: (String url,attributes) {
            return Image.network(url);
          },
          videoBuilder: (String url,attributes) {
            return YourVideoWidget();
          }
        ),
      );

supported markdown samples:

<video src="https://xxx.mp4" controls="controls"/>

<img width="150" alt="018" src="https://xxx.png"/>

![demo](https://xxx)

if you want to custom other tag widgets, you need use WidgetConfig

Links

you can custom link style

  Widget buildMarkdown() => MarkdownWidget(
        data: data,
        styleConfig: StyleConfig(
          pConfig: PConfig(
            linkStyle: TextStyle(...),
            onLinkTap: (url){
              _launchUrl(url);
            }
          )
        ),
      );

TOC

if you want to get a TOC function

  final TocController tocController = TocController();

  Widget buildMarkdown() => MarkdownWidget(
        data: data,
        tocListBuilder: (LinkedHashMap<int, Toc> tocList){
          ///here you can get markdown toc list
        },
        controller: tocController..addListener(() {
          final currentTocNode = tocController.toc;
          if(currentTocNode != null){
            ///do what you want to do
          }
        }),
      );

hightlight code

you can config lots of theme for code

import 'package:markdown_widget/config/highlight_themes.dart' as theme;

  Widget buildMarkdown() => MarkdownWidget(
        data: data,
        styleConfig: StyleConfig(
          preConfig: PreConfig(
            language: 'java',
            theme: theme.a11yLightTheme
          )
        ),
      );

if you have any good idea or sugesstion, welcome for PR and issue

appendix

Here are the other packages used in markdown_widget

package	explain
markdown	parse markdown data
flutter_highlight	make code highlight
html	parse html data
video_player_web	play video in flutter web
video_player	video interface
chewie	a simple and beautiful video player
scrollable_positioned_list	for TOC function