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

最近项目上遇到了展示"大纲文本"内容的需求，前端从后端接收的文本内容为markdown格式，需要转换成HTML格式在页面渲染，具体效果如下：

​​​​​​​

需要转换的markdown 文本格式如下：

const text = `
# 一个JavaScript库
> 起源于Facebook的内部项目
## React的流行
> ### 因为它能帮助开发者高效地构建用户界面
> 由Facebook公司开发
*  目前由开放源代码社区维护和开发
> 介绍自己的姓名、年级、学校等基本信息。
*  学习特长
> 它专注于视图的渲染。
*  而不是提供完整的MVC
> 介绍自己的篮球和吉他爱好及表演经历。
### 模型-视图-控制器）框架中的M（模型）和C（控制器）的功能
> 作业内容概述
*  涉及的知识点
> React支持在多个浏览器上运行，。
* 包括Chrome、IE、Safari、Opera、Firefox、Edge等
> 包括Chrome、IE、Safari、Opera、Firefox、Edge等
* 包括Chrome、IE、Safari、Opera、Firefox、Edge等
> 包括Chrome、IE、Safari、Opera、Firefox、Edge等
## 包括Chrome、IE、Safari、Opera、Firefox、Edge等
> 数学知识分享，解题技巧
### 知识点总结
> 数学知识点总结
* 代数运算
> 简化复杂的代数式，解决实际问题。
* 几何学科
> 研究平面和立体的形状、位置和计算方法。
* 概率：基本概念
> 研究随机事件的概率和计算方法。
### 题型分类
> 分门别类地解析
* 选择题分类
> 包括单选题、多选题、判断题等
* React使用MIT License进行授权，这表明它是免费使用的
> 这表明它是免费使用的
* 它的最新版本是18.2.0，
> 软件大小为111 KB
`;

  考虑到项目只需要渲染简单的纯色文本格式，并且只渲染展示，不可编辑，所以选择插件的时候，我尽量从稳定、轻量化方向考虑

最终选择了三款【react-remarkable】、【marked】、 【react-markdown】，并且对这三款插件作了一个详细的比较，用到这个功能的小伙伴可以自行选择。

一.react-remarkable

 react-remarkable（GitHub | GitCode）是基于 remarkable 和 React 的组件，它允许你在 React 项目中直接渲染 Markdown 文本。这个项目由 ACDLite 开发并维护

项目地址

 

虽然可以正常使用，但项目的用户量相对较少，最近更新时间也是7年前，比较老，所以不推荐使用

二.marked

 marked 是一个基于 JavaScript 的开源 Markdown 渲染引擎，用于将 Markdown 格式的文本转换为 HTML。它具有出色的性能、高度可定制性和广泛的生态支持。

 可以看到这个插件的用户量比较大，且比较新，我们公司线上项目就是用的这个插件，但在使用的过程中发现该插件的较高版本（4.3.0） 在版本低于15的safari浏览器中会出问题，所以，如果不考虑低版本safari浏览器的兼容问题，可以放心使用这个插件的新版本，如果想要用这个组件，又到兼顾低版本safari浏览器的兼容问题，可以选择用4.3.0 版本及以下的 marked 插件。

这是后面回来补充的：我们用marked 插件的线上项目又又又出问题了，即便是降到4.3.0 版本，依然不兼容部分低版本苹果手机，所以建议各位还是用react-Markdown 吧。

用法

1.将 marked 添加到你的项目依赖中：

   npm install marked 
   yarn add marked

2.

import './WPOutlineRender.scss';
import marked from 'marked';

 export function WPOutlineRender({ text, className = '', ...props }: { text } & React.HTMLAttributes<HTMLDivElement>) {
  const __html = marked.parse(text);
  return <div className={'WPOutlineRender ' + className} dangerouslySetInnerHTML={{ __html }} {...props} />;
}

  通过marked 转换过来的HTML 格式还不能满足我的要求，所以我直接手动修改css 的样式来作样式的调整

.WPOutlineRender {
  h1 {
    font-size: 1.3em;
    font-weight: 600;
  }
  h2 {
    font-size: 1.2em;
    font-weight: 600;
  }
  h3 {
    font-size: 1.1em;
    font-weight: 600;
  }
  ul,
  ol {
    padding-left: 20px;
    list-style: revert;
  }
  ul ~ blockquote {
    padding-left: 20px;
  }
}

当然marked还有很多高级的用法，这里就不过多描述了，若需了解更多高级功能和技术细节，请参阅 marked 的 官方文档

三、react-Markdown

项目地址:GitCode - 开发者的代码家园

React Markdown是一个轻量级但功能强大的React组件，它允许你在React应用中轻松地将Markdown文本渲染为HTML元素。由@rexxars开发的，它的核心目标是提供一个简洁且高效的解决方案，将Markdown字符串转化为React元素。这个库支持标准的Markdown语法，并允许通过插件系统扩展其功能。

  目前插件比较新，可以看到最新更新时间为6个月前，且用户量数据也可以，目前在我们项目中使用起来也还没发现什么问题。

使用

import './WPOutlineRender.scss';
import ReactMarkdown from 'react-markdown';

export function WPOutlineRender({ text, className = '', ...props }: { text } & React.HTMLAttributes<HTMLDivElement>) {
  return (
    <ReactMarkdown className={'WPOutlineRender ' + className} {...props}>
      {text}
    </ReactMarkdown>
  );
}