react方法返回html_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 headerAnd this is a paragraph'ReactDOM.render( , document.getElementById('container'))

高亮显示代码

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

下面是使用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 ( 

  {this.props.value}  

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

支持table

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