胖蔡说技术
随便扯扯

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-markdownreact-syntax-highlighter

赞(0) 打赏
转载请附上原文出处链接:胖蔡说技术 » React解析Markdown语法
分享到: 更多 (0)

请小编喝杯咖啡~

支付宝扫一扫打赏

微信扫一扫打赏