在一些项目中需要用markdown来写文章并保存到数据库中，从数据库中读取出来需要转换为html格式的代码段才能正确显示文章
将 markdown 转为html有很多种方法，现在我们在react中用 marked.js 来实现转换
安装依赖
npm install marked --save
marked使用
// test.js
import React, { Component } from 'react'
import marked from 'marked'
const = '### test'
marked.setOptions({ // marked 设置
renderer: new marked.Renderer(),
gfm: true,
tables: true,
breaks: true,
pedantic: false,
sanitize: false,
smartLists: true,
smartypants: false
})
class Test extends Component {
render () {
const strHtml = marked(const)
return (
<div>
<div>
{strHtml}
</div>
</div>
)
}
}
export default Test
执行上面的代码页面显示的结果
image
dangerouslySetInnerHTML
我们看到执行marked(const)返回的是一个字符串，这时我们要用到 react 标签中的一个属性 dangerouslySetInnerHTML 相当于vue中的 v-html。
dangerouslySetInnerHTML接收的是一个对象键值对
<div dangerouslySetInnerHTML={{__html: markedHtml}}/>
代码块样式 highlight
当我们在使用markdown中代码块时发现代码块样式并不是我们希望的有背景色。
这时我们要用到 highlight.js
npm install highlight.js --save
引用
import hljs from 'highlight.js/lib/highlight';
import 'highlight.js/styles/github.css'
hljs.initHighlightingOnLoad()
设置marked
marked.setOptions({
highlight: function (code, lang) {
if (lang && hljs.getLanguage(lang)) {
return hljs.highlight(lang, code, true).value;
} else {
return hljs.highlightAuto(code).value;
}
}
})
image
这时我们发现code标签有类名了
markdown转为html介绍到这里，有错误和更好的方法的大家积极交流，欢迎留言！
