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

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