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解析的主要内容,如果未能解决你的问题,请参考以下文章

MARKDO

react 将字符串解析为markdown

献给写作者的 Markdown 新手指南

HyperDown.js 这个markdown解析器在浏览器中怎么使用

JIRA常用markdown语法整理

Markdown 使用中常见的问题及解决方法