2.4.3 β€’ Published 2 years ago

@alicloud/rc-markdown v2.4.3

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

@alicloud/rc-markdown

Yet another react wrapper of markdown parse based on micromark.

Plugins built-in:

Other plugins, e.g. micromark-extension-math, you have to install it yourself and put it into props.extraExtensions:

import React from 'react';
import {
  math,
  mathHtml
} from 'micromark-extension-math';

import Markdown, {
  MarkdownExtension
} from '@alicloud/rc-markdown';

const extraExtensions: MarkdownExtension[] = [{
  syntax: math(),
  html: mathHtml()
}];

export default function MyMarkdown(): JSX.Element {
  return <Markdown {...{
    source: __YOUR_MARKDOWN_DOCUMENT_IN_STRING_FORMAT__,
    extraExtensions
  }} />;
}

Why πŸ™ˆ

I used to use react-markdown, however it has these defects:

  1. Its dependency react-markdown β†’ unified β†’ is-plain-obj exports only ES6, which I have to make some changes to my webpack config
  2. The bug https://github.com/remarkjs/react-markdown/issues/460 which lives quite a long time makes it impossible to use HTML...
  3. I tried to use remark-directive plugin, and... it is way too complex...

That's why I have to say goodbye to the world’s most popular Markdown parser and say Hi to the smallest CommonMark compliant markdown parser.

However, micromark has its own problems - the typings are NOT well-defined, I have to do quite a lot of diggings and hacking.

So far so good, cheers πŸŽ‰.

Usage πŸ’₯

Basic

import React from 'react';

import Markdown from '@alicloud/rc-markdown';

export default function MyMarkdown(): JSX.Element {
  return <Markdown {...{
    source: __YOUR_MARKDOWN_DOCUMENT_IN_STRING_FORMAT__
  }} />;
}

Use Directive

import React from 'react';

import Markdown, {
  MicromarkDirective,
  MarkdownExtensionDirectiveHtmlOptions
} from '@alicloud/rc-markdown';

// remember to make it static, do NOT put it inside render
const directiveOptions: MarkdownExtensionDirectiveHtmlOptions = {
  abbr(d: MicromarkDirective) {
    if (d.type !== 'textDirective') {
      return false;
    }
    
    this.tag('<abbr');
    
    if (d.attributes && 'title' in d.attributes) {
      this.tag(` title="${this.encode(d.attributes.title)}"`);
    }
    
    this.tag('>');
    this.raw(d.label || '');
    this.tag('</abbr>');
  }
};

export default function MyMarkdown(): JSX.Element {
  return <Markdown {...{
    source: __YOUR_MARKDOWN_DOCUMENT_IN_STRING_FORMAT__,
    plugins: {
      directive: directiveOptions
    }
  }} />;
}

Styles πŸ”₯

This package ships with no styles at all.

Use @alicloud/console-base-rc-markdown you want to have a beautiful look (with CSS var), or maybe you can wrap with your own styling code.

Useful Links ✨

GFM: https://gith[micromark]ub.github.com/gfm "GitHub Flavored Markdown"

2.4.3

2 years ago

2.4.1

3 years ago

2.4.2

2 years ago

2.4.0

3 years ago

2.3.2

3 years ago

2.3.4

3 years ago

2.3.6

3 years ago

2.3.0

3 years ago

2.2.1

3 years ago

2.2.3

3 years ago

2.2.2

3 years ago

2.0.1

3 years ago

2.0.0

3 years ago

2.2.0

3 years ago

2.1.1

3 years ago

2.1.0

3 years ago

2.0.0-alpha.1

3 years ago

2.0.0-alpha.2

3 years ago

1.2.0

4 years ago

1.1.92

4 years ago

1.1.96

4 years ago

1.1.95

4 years ago

1.1.94

4 years ago

1.1.97

4 years ago

1.1.76

4 years ago

1.1.75

4 years ago

1.1.74

4 years ago

1.1.73

4 years ago

1.1.72

4 years ago

1.1.70

4 years ago

1.1.69

4 years ago

1.1.68

4 years ago

1.1.67

4 years ago

1.1.66

4 years ago

1.1.64

4 years ago

1.1.63

4 years ago

1.1.61

4 years ago

1.1.60

4 years ago

1.1.59

4 years ago

1.1.58

4 years ago

1.1.54

4 years ago

1.1.57

4 years ago

1.1.51

4 years ago

1.1.53

4 years ago

1.1.50

4 years ago

1.1.45

4 years ago

1.1.48

4 years ago

1.1.47

4 years ago

1.1.46

4 years ago

1.1.44

4 years ago

1.1.43

4 years ago

1.1.38

4 years ago

1.1.35

4 years ago

1.1.39

4 years ago

1.1.40

4 years ago

1.1.42

4 years ago

1.1.34

4 years ago

1.1.33

4 years ago

1.1.32

4 years ago

1.1.31

4 years ago

1.1.29

4 years ago

1.1.30

4 years ago

1.1.28

4 years ago

1.1.27

4 years ago

1.1.25

4 years ago

1.1.22

4 years ago

1.1.21

4 years ago

1.1.20

4 years ago

1.1.19

4 years ago

1.1.18

4 years ago

1.1.17

4 years ago

1.1.16

4 years ago

1.1.15

4 years ago

1.1.14

4 years ago

1.1.13

4 years ago

1.1.12

4 years ago

1.1.11

4 years ago

1.1.9

4 years ago

1.1.8

4 years ago

1.1.7

4 years ago

1.1.6

4 years ago

1.1.5

4 years ago

1.1.4

4 years ago

1.1.10

4 years ago

1.1.3

4 years ago

1.1.2

4 years ago

1.1.1

4 years ago

1.1.0

4 years ago

1.0.19

4 years ago

1.0.18

4 years ago

1.0.17

4 years ago

1.0.16

4 years ago

1.0.15

4 years ago

1.0.14

4 years ago

1.0.13

4 years ago

1.0.12

4 years ago

1.0.11

4 years ago

1.0.10

4 years ago

1.0.9

4 years ago

1.0.7

4 years ago

1.0.5

4 years ago

1.0.4

4 years ago

1.0.3

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago