React解析Markdown语法

本文提供一种简单的在React中解析Markdown语法的实现方式，@xuxo 总结编写。

Markdown语法是一种可以完全脱离鼠标的文本标记语法，沉浸在键盘中可以提高输入速度，这是我最喜欢使用的以一种文本编辑模式。使用的多了就需要显示，那么如何在react中解析Markdown语法呢：

引入组件

推荐一个比较好用的Markdown语法解析库，点击查看详情

yarn add react-markdown
 

使用

import Markdown from 'react-markdown';
 ...
 const source = "# 标题 \n 内容"
 return (<div>
             <Markdown
                 source={source}
                 escapeHtml={false} />
         </div>)
 ...
 

source 传入Markdown格式的数据源
escapeHtml 是否转义html语法，参数为true后转义显示html源码

至此简单的react解析Markdown基本结束。

引入新的组件

但是随着深入的使用，发现代码块并没有高亮显示，感觉不好看，需要继续引入一个新的组件库：

yarn add react-syntax-highlighter
 

这是一个语法高亮显示组件，点击查看详情

高亮组件的使用

自定义一个组件

CodeBlock备用

import React from 'react';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 import { tomorrowNightEighties } from 'react-syntax-highlighter/dist/esm/styles/hljs';

 class CodeBlock extends React.PureComponent {
     render() {
         const { value } = this.props;
         return (<SyntaxHighlighter style={tomorrowNightEighties} >{value}</SyntaxHighlighter>);
     }
 }
 export default CodeBlock;
 

配合react-markdown使用

<Markdown
     source={source}
     escapeHtml={false}
     renderers={{
         code: CodeBlock
     }}/>
 

renderers这个属性可以传入一个组件，然后将两个组件的效果渲染到一起。做完这些就能渲染出你想要的效果了。更多使用方法可以查看完整文档react-markdown，react-syntax-highlighter