React wrapped Markdown based on micromark

Usage no npm install needed!

<script type="module">
  import alicloudRcMarkdown from 'https://cdn.skypack.dev/@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 πŸ’₯


import React from 'react';

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

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

Use Directive

import React from 'react';

import Markdown, {
} 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;
    if (d.attributes && 'title' in d.attributes) {
      this.tag(` title="${this.encode(d.attributes.title)}"`);
    this.raw(d.label || '');

export default function MyMarkdown(): JSX.Element {
  return <Markdown {...{
    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 ✨