refined_markdown 1.2.1

  • Readme
  • Changelog
  • Example
  • Installing
  • 66

Refined Markdown #

pub-mirror-cn pub travis

What is it? #

A simple Markdown renderer 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:flutter/rendering.dart';
import 'package:refined_markdown/refined_markdown.dart';

void main() {
  // debugPaintSizeEnabled = true;
  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> {
  String filePath = 'assets/markdown.html';

  @override
  Widget build(BuildContext context) {
    CSS baseCSS = CSS();
    baseCSS.fontSize = 13;
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
        title: Text('Markdown测试'),
      ),
      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测试'),
      ),
      body: RefinedMarkdown(
        text: r"""
        Contents that are written in Markdown format
        """,
        css: baseCSS,
      ),
    );
  }

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

1.2.1 #

Fix #

  1. Rendering fault when there exists “\n *\n”;
  2. Styled text rendering fault when some of the font features are not defined

1.2.0 #

Add #

  1. Minimal text style support using html grammar.
  2. New picture rendering (online picture only! I will not support using local pictures because this might be quite complex and involves quite a lot of native adaptations)
  3. Deleted text rendering
  4. Highlighted text rendering
  5. Divider rendering

Fix #

  1. Link rendering fault when mixed with normal text

Optimize #

  1. Bold text and etalic text displaying

Notice #

  1. This is the very stable version that has lived up to my expectation right now, if there are any rendering fault, feel free to give an Issue or a PR, that will help a lot.
  2. I’m working on rendering tables, this might be a hard process, I need more time.
  3. Due to my laziness, if you have any ideas about how to render local pictures, feel free to contact me, thank you very much!

1.1.0 #

Optimize #

All rendering logic, now the rendering order no longer relies on the so-called “priorities”.

Fix #

  1. “\n” rendering when input contains "\n\n”
  2. Link rendering failed when bold text format “**” is in “[]”
  3. Bold and italic rendering fault when enrolled in normal words
  4. Code segment rendering fault when it is empty
  5. More minor bug fixes.

1.0.0+6 #

[Add] Basic travis CI support.

1.0.0+5 #

Upload version badge in README for convenience. =w=

1.0.0+4 #

Fix #

  1. Symbol displaying of normal list
  2. “\n” ignored in links at the beginningof a new line
  3. Links failed to render when a list is formerly declared

Optimize #

  1. All lists rendering logic
  2. All links rendering logic

Notice #

If there are still displaying problems, please feel free to give an Issue or a PR, I’ll handle them as quickly as I can, thank you.

1.0.0+3 #

You know what, the displaying of readme looks weird. QAQ

1.0.0+2 #

Really sorry, update README again! I am an obsessive. QAQ

1.0.0 #

Nothing changed, just update README, and prove that this package is not an early version.

0.0.1 #

First commit.

What is working now? #

Now support rendering the following grammar. Some of them may not work as you wish, I am trying my best to optimize it, please be patient.

  • Normal text

  • Bold text

  • Italic text

  • Syntax highlight

  • code segment

  • Code blocks(including highlighting, using flutter_highlight. Thanks to pd4d10!)

  • headers
  • Normal list

  • Links

  • Pictures

  • Sequence list

  • Task list

What is next? #

  1. Just optimize the functions that has been built as much as I can.
  2. Add some html support that are frequently used.
  3. Support table rendering.

example/lib/main.dart

import 'package:flutter/material.dart';
// import 'package:flutter/rendering.dart';

/// If you want to use refined_markdown, please add description in pubspec.yaml
/// and import the package like this:
///
/// import 'package:refined_markdown/refined_markdown.dart';
///
import './refined_markdown.dart';

void main() {
  // debugPaintSizeEnabled = true;
  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测试'),
      ),
      body: RefinedMarkdown(
        text: r"""
        ###### H6(容错解析)
###### HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH6(折行处理测试)
###H3(无效解析)
###       H3(容错解析)
##### H5
  ## H2
### H3
## H2
##
## H2
# H1


- 普通列表
  - 缩进的普通列表
    - 缩进的普通列表
-普通列表(无效解析)
-     普通列表(容错解析)


##### 标题 - 普通列表(列表无效解析)
- 普通列表 ##### 标题(标题无效解析)


123. 顺序列表
  ###### - 缩进的普通列表(列表无效解析)
  - ###### 标题(标题无效解析)
  123. 缩进的顺序列表
    123. 缩进的顺序列表
    - 缩进的普通列表

- [ ] 任务列表(未完成)
- [x] 任务列表(已完成)
  - [x] 缩进的任务列表(已完成)
    - [ ] 缩进的任务列表(未完成)
- [] 任务列表(无效输入)
- [gkwdnmd] 任务列表(无效输入)


##### 五级标题和**加粗文本**OHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH(效果叠加, 折行容错检测)
**加粗文本**
**加粗文本(无
效解析)*
普通文本和**加粗文本**和普通文本
  **前有空格的加粗文本**
    **前有空格的加粗文本**
    **加粗文本(无效解析, 解析斜体部位)*
普通文本和**加粗文本**和普通文本
##### 五级标题和**加粗文本**


*倾斜文本*普通文本*倾斜文本***加粗文本**普通文本**加粗文本**
  ***加粗倾斜文本***
  *前有空格的倾斜文本*
***加粗倾斜文本***
***仅加粗**
**仅加粗***
***仅倾斜*
*仅倾斜**
    ****仅解析加粗倾斜部分****
****仅解析加粗倾斜部分****


```dart
// 代码块
void main() => print("Hello world");
```
          ```dart
          // 缩进的代码块
          void main() => print("Hello world");
            void main() => print("Hello world");
      void main() => print("Hello world");
          void main() => print("Hello world");
          RegExp langReg = RegExp(r"```[^\n]*");
                        var langMatch = langReg.firstMatch(src.substring(start, end));
            int langStart = start + langMatch.start; // 第一个"`"的位置
int langEnd = start + langMatch.end; // "dart"行的"\n"位置
            String language = src.substring(langStart + 3, langEnd).trim();
          ```
```dart
// 另一个代码块
void main() => print("Hello world");
```


```dart
```dart
// 容错测试(经不起折腾, 请按照正规语法办事)
void main() => print("Hello world");
```
```


`代码段`
  `缩进的代码段`
`代码段`普通文本`代码段`***加粗倾斜文本***普通文字***加粗倾斜文本***普通文本*斜体文本*OHHHHHHHHHHHHHHHHHHHHHHHH(折行测试)


---
# yaml
string_1: "Bar"
string_2: 'bar'
string_3: bar
---
      ---
      # 缩进的yaml
      string_1: "Bar"
      string_2: 'bar'
      string_3: bar
      ---
---
# 又一个yaml
string_1: "Bar"
string_2: 'bar'
string_3: bar
---


---         yaml
# 无效的yaml
string_1: "Bar"
string_2: 'bar'
string_3: bar
---yaml


[百度](https://www.baidu.com)普通文字
  ##### **[百度加粗](https://www.baidu.com)**
  **[百度加粗](https://www.baidu.com)**
      [**百度加粗**](https://www.baidu.com)
- [链接](https://www.baidu.com)普通文字
[随意的标记] 普通文字[链接](https://pub.dev/packages/refined_markdown)


在线图片![图片](https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3702648800,3967102116&fm=26&gp=0.jpg)
离线图片![图片](./test.jpg)


分割线
----
不解析的分割线 ----
----不解析的分割线


~~删除线~~普通文字~~删除线~~普通文字**加粗文字***斜体****加粗斜体***==文字高亮==
  ====不解析高亮

<font color=red size=20>红色文字, 大小20</font>
<font color=red size=11>红色文字, 大小11</font>普通文字<font color=red size=20>红色文字, 大小5</font>**加粗文字**
<font color=red size=11>红色文字, 大小11</font>普通文字**加粗文字***倾斜文字**倾斜文字*普通文字~~删除线~~==语法高亮==<br/><font color=red size=20>红色文字, 大小5</font>
换行符<br/>换行符



""",
        css: baseCSS,
      ),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  refined_markdown: ^1.2.1

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:refined_markdown/refined_markdown.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
32
Health:
Code health derived from static analysis. [more]
99
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
66
Learn more about scoring.

We analyzed this package on Jun 2, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.2
  • pana: 0.13.8-dev
  • Flutter: 1.17.1

Health issues and suggestions

Document public APIs. (-0.65 points)

165 out of 167 API elements have no dartdoc comment.Providing good documentation for libraries, classes, functions, and other API elements improves code readability and helps developers find and use your API.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.7.0 <3.0.0
cached_network_image ^2.0.0 2.2.0+1 2.3.0-beta.1+1
flutter 0.0.0
flutter_highlight ^0.6.0 0.6.0
highlight ^0.6.0 0.6.0
url_launcher ^5.4.2 5.4.10
Transitive dependencies
charcode 1.1.3
clock 1.0.1
collection 1.14.12
convert 2.1.1
crypto 2.1.5
file 5.1.0
flutter_cache_manager 1.3.0
flutter_web_plugins 0.0.0
http 0.12.1
http_parser 3.1.4
intl 0.16.1
meta 1.1.8
path 1.7.0
path_provider 1.6.9
path_provider_macos 0.0.4+3
path_provider_platform_interface 1.0.2
pedantic 1.9.0
platform 2.2.1
platform_detect 1.4.0
plugin_platform_interface 1.0.2
pub_semver 1.4.4
rxdart 0.24.1
sky_engine 0.0.99
source_span 1.7.0
sqflite 1.3.0+2 1.3.1-dev.1
sqflite_common 1.0.1
string_scanner 1.0.5
synchronized 2.2.0
term_glyph 1.1.0
typed_data 1.1.6
url_launcher_macos 0.0.1+7
url_launcher_platform_interface 1.0.7
url_launcher_web 0.1.1+6
uuid 2.0.4
vector_math 2.0.8
Dev dependencies
flutter_test
test ^1.14.2