react的markdown编辑器react-markdown

发表于 更新于 分类于 阅读次数：

一、用到的npm包

react-markdown ：用来解析markdown。
react-syntax-highlighter ：用来让markdown中代码语法高亮。

二、安装

1
cnpm i react-markdown  react-syntax-highlighter --save

三、例子

本次的例子的package.json中这两个npm包版本信息

1
2
"react-markdown": "^5.0.2",
"react-syntax-highlighter": "^15.3.0"

开始例子
使用markdown中的代码功能时用~~~符号代替了``` 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
import React from 'react';
import ReactMarkdown from "react-markdown";
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';

const App = () => {
  
  // 代码语法高亮
  const renderers = {
    code: ({ language, value }) => {
      return <SyntaxHighlighter style={vscDarkPlus} language={language} children={value} />
    }
  }
  
  // markdown的渲染的字符串
  const str = `
  # 说明
  - a
  - b
  
  ~~~js
  cosole.log(111)
  ~~~
  `;
  
  return (
    <div className="App" >
      <ReactMarkdown renderers={renderers} children={str} />
    </div >
  )

}

export default App;

运行结果
1.png

如果想要了解更多的配置，请看两个包的文档地址：

相关博客