@alicloud/rc-markdown

React wrapped Markdown based on micromark

Usage no npm install needed!

<script type="module">
  import alicloudRcMarkdown from 'https://cdn.skypack.dev/@alicloud/rc-markdown';
</script>

README

@alicloud/rc-markdown

Yet another react wrapper of markdown parse based on micromark.

Plugins built-in:

Other plugins NOT yet usable.

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, {
  MarkdownDirectivePluginOptions,
  MicromarkDirective
} from '@alicloud/rc-markdown';

// remember to make it static, do NOT put it inside render
const directiveOptions: MarkdownDirectivePluginOptions = {
  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).

Useful Links ✨