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

JS加载解析Markdown文档过程详解

这篇文章主要介绍了JS加载解析Markdown文档过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

网上有很多网站会通过.md文档来做页面内容，很好奇，这是怎么做的？

出于好奇，建了一个test.md文件：