React markdown 编辑器

react-markdown 是一款 github 上开源的适用于 react 的 markdown 组件，可以基本实现 markdown 的功能，且可以根据自己实际应用定制的 remark 组件。

安装

安装 markdown 预览插件 react-markdown

npm install react-markdown

或者：

yarn add react-markdown

安装 markdown 编辑器插件 for-editor

yarn add for-editor

或者：

npm install for-editor

安装代码高亮插件包 react-syntax-highlighter

npm install react-syntax-highlighter

或者：

yarn add react-syntax-highlighter

安装 remark-math

npm install remark-math

或者：

yarn add remark-math

安装 rehype-katex

npm install rehype-katex

或者：

yarn add rehype-katex

安装 rehype-raw

npm install rehype-raw

或者：

yarn add rehype-raw

组件依赖

组件涉及的依赖及版本 package.json：

{
   
  "dependencies": {
   
    "antd": "^4.16.10",
    "less": "^4.1.1",
    "less-loader": "4.0.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0",
    "for-editor": "^0.3.5", // Markdown编辑
    "react-markdown": "^8.0.7", // Markdown预览
    "rehype-katex": "^6.0.2", // 数学公式katex语法
    "rehype-raw": "^6.1.1", // 支持HTML语法解析
    "remark-math": "^5.1.1", // 支持数学公式 
    "react-scripts": "4.0.3",
    "typescript": "^5.0.4",
  }
}

• for-editor：markdown 编辑器
• react-markdown：markdown 内容预览及展示
• rehype-raw：解析 HTML 文本富文本内容
• remark-math、rehype-katex：数学公式支持及语法解析使用（数学公式的样式展示需要 katex.min.css 文件支持）

基本使用

编辑器 for-editor

属性

名称	类型	默认值	描述
value	String	-	输入框内容
placeholder	String	开始编辑…	占位文本
lineNum	Boolean	true	是否显示行号
style	Object	-	编辑器样式
height	String	600px	编辑器高度
preview	Boolean	false	预览模式
expand	Boolean	false	全屏模式
subfield	Boolean	false	双栏模式(预览模式激活下有效)
language	String	zh-CN	语言(支持 zh-CN:中文简体, en:英文)
toolbar	Object	如下	自定义工具栏

/*
  默认工具栏按钮全部开启, 传入自定义对象
  例如: {
    h1: true, // h1
    code: true, // 代码块
    preview: true, // 预览
  }
  此时, 仅仅显示此三个功能键
  注:传入空对象则不显示工具栏
 */

toolbar: {
   
  h1: true, // h1
  h2: true, // h2
  h3: true, // h3
  h4: true, // h4
  img: true, // 图片
  link: true, // 链接
  code: true, // 代码块
  preview: