react渲染markdown内容-使用react-markdown

在react中渲染markdown内容有很多方法：

1. 后端将markdown渲染成html返回给前端进行渲染
2. react将markdown渲染成html进行渲染
3. react使用框架直接对markdown进行渲染

最方便的就是使用react使用框架直接对markdown进行渲染了，这里推荐使用react-markdown。

github：https://github.com/rexxars/react-markdown

安装

npm install --save react-markdown

使用

const React = require('react')
const ReactDOM = require('react-dom')
const ReactMarkdown = require('react-markdown')
const input = '# This is a header\n\nAnd this is a paragraph'
ReactDOM.render(
 <ReactMarkdown source={input} />,
 document.getElementById('container')
)

高亮显示代码

高亮显示代码需要制定对code进行渲染，需要提供一个对code的renderer

 <ReactMarkdown className={'markdown'}
 //必须是false不然img标签渲染不出来
 escapeHtml={false}
 source={this.props.source}
 renderers={{
 code: CodeBlock
 }}
 />

下面是使用highlight.js编写的code renderer

var React = require('react');
var PropTypes = require('prop-types');
import hljs from '../asset/lib/highlight/highlight.min.js'
var h = React.createElement;
export default class CodeBlock extends React.PureComponent {
 constructor(props) {
 super(props)
 this.setRef = this.setRef.bind(this)
 }
 setRef(el) {
 this.codeEl = el
 }
 componentDidMount() {
 this.highlightCode()
 }
 componentDidUpdate() {
 this.highlightCode()
 }
 highlightCode() {
 hljs.highlightBlock(this.codeEl)
 }
 render() {
 return (
 <pre>
 <code ref={this.setRef} className={`language-${this.props.language}`}>
 {this.props.value}
 </code>
 </pre>
 )
 }
 }
 CodeBlock.defaultProps = {
 language: ''
 }
 CodeBlock.propTypes = {
 value: PropTypes.string.isRequired,
 language: PropTypes.string
 }

react-markdown的demo里有相关的实例：

https://github.com/rexxars/react-markdown/blob/master/demo/src/code-block.js

渲染html元素

markdown是支持html标签的，有很多的应用场景，比如对图片设置长宽就需要使用<img>标签，react-markdown默认是不解析html标签的，这是只要通过设置escapeHtml={false}就可以了。

支持table

react-markdown老版本是不支持table的，目前最新版的4.0.3是支持的，所以如果不支持table的话建议对react-markdown进行升级

详情： https://www.lvbby.com/p/md/1811301010468479837004