Products
GG网络技术分享 2025-03-18 16:14 0
在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文档过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
网上有很多网站会通过.md文档来做页面内容，很好奇，这是怎么做的？
出于好奇，建了一个test.md文件：
| # Hello World! asdfa asd *斜体文本* **粗体文本** ***斜粗体文本*** 分隔线（如下） *** * * * **** - - - ----------- GOOGLE.COM ~~删除线~~ <u>下划线</u> |
用浏览器打开之后，结果就被原封不动的输出来了，浏览器根本不会解析这玩意... 跟阮老师的blog相差好大啊~呵呵~还是太天真了！
然后，发现：
原来markdown文本还是需要用marked.js这么一个库来解析的！于是乎，依葫芦画个瓢
| <!doctype html> <html> <head> <meta charset=\"utf-8\"/> <title>md文档内容转成html显示</title> </head> <body> <div id=\"content\" style=\"width: 500px;height: 500px;overflow: auto\"></div> <div style=\"margin-top: 30px\"> <form name=\"form\" action=\"\" method=\"post\"> <select name=\"q\"> <option value=\"md/gs.md\">公式</option> <option value=\"md/test.md\">第一个Markdown文档</option> </select> <input type=\"button\" value=\"显示\" onclick=\"showMarkdown()\"> </form> </div> <script type=\"text/javascript\" src=\'https://cdn.jsdelivr.net/npm/marked/marked.min.js\'></script> <script type=\"text/javascript\"> function showMarkdown() { var f = form; var xmlhttp; if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } else { xmlhttp = new ActiveXObject(\'Microsoft.XMLHttp\'); } xmlhttp.onreadystatechange = function() { if(xmlhttp.readyState == 4 && xmlhttp.status == 200) { document.getElementById(\'content\').innerHTML = marked(xmlhttp.responseText); } } // 向服务器发送请求 xmlhttp.open(\'GET\', f.q.value, true); xmlhttp.send(); } </script> </body> </html> |
于是就有了下面的样子：
原理就是用ajax请求，取到 .md文件里的内容，再通过marked.js提供的marked()方法将markdown语法的文本转成html文档。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
Demand feedback
