html 转换成 markdown,markdown转为html

在一些项目中需要用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 (

{strHtml}

)

}

}

export default Test

执行上面的代码页面显示的结果

image

dangerouslySetInnerHTML

我们看到执行marked(const)返回的是一个字符串，这时我们要用到 react 标签中的一个属性 dangerouslySetInnerHTML 相当于vue中的 v-html。

dangerouslySetInnerHTML接收的是一个对象键值对

代码块样式 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介绍到这里，有错误和更好的方法的大家积极交流，欢迎留言！