基于react的三款稳定好用Markdown格式渲染成HTML插件

npm install react-markdown

import React from 'react';
import ReactMarkdown from 'react-markdown';

const markdown = `
# Hello, Markdown!
This is a paragraph.
`;

function MyComponent() {
  return (
    <ReactMarkdown source={markdown} />
  );
}

npm install marked

import React, { useEffect, useRef, useState } from 'react';
import marked from 'marked';

function MyComponent({ markdown }) {
  const [html, setHtml] = useState('');

  const markedRenderer = marked.Renderer();

  useEffect(() => {
    marked.setOptions({
      renderer: markedRenderer,
      gfm: true,
      tables: true,
      breaks: false,
      pedantic: false,
      sanitize: false,
      smartLists: true,
      smartypants: false,
    });

    setHtml(marked(markdown));
  }, [markdown]);

  return (
    <div dangerouslySetInnerHTML={{ __html: html }} />
  );
}

npm install markdown-it

import React from 'react';
import markdownIt from 'markdown-it';

const md = new markdownIt();

function MyComponent({ source }) {
  const html = md.render(source);

  return (
    <div dangerouslySetInnerHTML={{ __html: html }} />
  );
}