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

在React项目中，可以使用的Markdown格式渲染为HTML的库有很多，其中三款比较稳定且好用的插件如下：

1. react-markdown
2. marked
3. markdown-it

以下是这三款插件的简单使用方法：

1. react-markdown

安装：

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} />
  );
}

2. marked

安装：

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 }} />
  );
}

3. markdown-it

安装：

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 }} />
  );
}

这三款插件各有特色，react-markdown 更适合React项目，marked 是常用的Markdown解析库，而 markdown-it 则提供了更多的定制化选项。根据项目需求和个人喜好选择合适的插件即可。