react 简单 markdown解析
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react 简单 markdown解析相关的知识,希望对你有一定的参考价值。
参考技术A 使用:效果:
react 将字符串解析为markdown
react 中有许多组件支持把字符串转化为markdown,并以html的形式展示出来。这里我试用了 react-markdown 和 hyperdown 两个库,发现hyperdown比较好,因为react-markdown不能解析<br>标签。其他的还有markdown-it等
react-markdown组件:
https://www.npmjs.com/package/react-markdown
https://www.jianshu.com/p/91c360d96e44
安装:
npm install --save react-markdown
使用:
es5语法
const React = require(‘react‘) const ReactDOM = require(‘react-dom‘) const ReactMarkdown = require(‘react-markdown‘) const input = ‘# This is a header And this is a paragraph‘ ReactDOM.render( <ReactMarkdown source={input} />, document.getElementById(‘container‘) )
es6语法的话把 require换成import即可
import ReactMarkdown from ‘react-markdown‘;
hyperdown组件:
https://github.com/SegmentFault/HyperDown.js
以上是关于react 简单 markdown解析的主要内容,如果未能解决你的问题,请参考以下文章