refined_markdown 1.2.2

Flutter Android iOS

A simple Markdown renderer that is written mostly in dart (grammar analysing and rendering part). Simple, quiet, fast, that is all refined markdown is intended to be.

Refined Markdown #

pub travis

What is it? #

A simple Markdown renderer (for now) that is written mostly in dart (grammar analysing and rendering part).

Demo preview #

demo1 demo2 demo3 demo4 demo5

How to use it? #

Using RefinedMarkdown is simple. What you need to do is generally like this:

// main.dart
import 'package:flutter/material.dart';
import 'package:refined_markdown/refined_markdown.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  MyApp({Key key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MarkdownPage(),
    );
  }
}

class MarkdownPage extends StatefulWidget {
  @override
  _MarkdownPageState createState() => _MarkdownPageState();
}

class _MarkdownPageState extends State<MarkdownPage> {
  @override
  Widget build(BuildContext context) {
    CSS baseCSS = CSS();
    baseCSS.fontSize = 13;
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
        title: Text('Markdown Test'),
      ),
      body: RefinedMarkdown(
        text: r"""
        Contents that are written in Markdown format
				""",
        css: baseCSS,
      ),
    );
  }
}

The key part of the code above is:

@override
  Widget build(BuildContext context) {
    CSS baseCSS = CSS();
    baseCSS.fontSize = 13;
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
        title: Text('Markdown Test'),
      ),
      body: RefinedMarkdown(
        text: r"""
        Contents that are written in Markdown format
        """,
        css: baseCSS,
      ),
    );
  }

What are supported now? #

taml, code block, code segmentation, task list, normal list, sequence list, title, bold text, italic text, delete line, text highlight, text style, network photo, link, divider

What are the meanings of those params? #

RefinedMarkdown #

paramtypeexplanationis required
textStringThe raw text of a markdown string, please notice that.yes
cssCSSThe cascading style sheet (in concept) that helps you build the basic style of your markdown texts to be rendered. In detail, The rendered text style like the style of “## header2” will be rendered on the basis of the basic style (baseCSS in code demo above).yes

CSS #

paramtypedefault valueexplanationis required
fontSizeint11The size of the textno
fontColorColorColors.black87The color of the textno
backgroundColorColorColors.transparentThe color of the background of each textno
isItalicboolfalseWhether the text is displayed in bold styleno
isBoldboolfalseWhether the text is displayed in italic styleno
deletedboolfalseWhether the text is shown with line-throughno
underlineboolfalseWhether to show an underlineno

Using packages #

What’s more #

This package is using its own way to transfer markdown string to flutter widget without using any html/markdown packages for the base. It still get long way to go. More markdown standards will be supported in later version of refined_markdown in the following versions this summer :)

3
likes
90
pub points
50%
popularity

Publisher

autokaka.dogshitpiestudio.cn

A simple Markdown renderer that is written mostly in dart (grammar analysing and rendering part). Simple, quiet, fast, that is all refined markdown is intended to be.

Repository (GitHub)
View/report issues

Documentation

API reference

License

BSD (LICENSE)

Dependencies

cached_network_image, flutter, flutter_highlight, highlight, url_launcher

More

Packages that depend on refined_markdown