在一些項目中需要用markdown來寫文章并保存到數(shù)據(jù)庫中，從數(shù)據(jù)庫中讀取出來需要轉(zhuǎn)換為html格式的代碼段才能正確顯示文章
將 markdown 轉(zhuǎn)為html有很多種方法棉磨，現(xiàn)在我們在react中用 marked.js 來實現(xiàn)轉(zhuǎn)換
安裝依賴
npm install marked --save
marked使用
// test.js
import React, { Component } from 'react'
import marked from 'marked'
const = '### test'
marked.setOptions({ // marked 設(shè)置
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
執(zhí)行上面的代碼頁面顯示的結(jié)果
image
dangerouslySetInnerHTML
我們看到執(zhí)行marked(const)返回的是一個字符串江掩，這時我們要用到 react 標簽中的一個屬性 dangerouslySetInnerHTML 相當于vue中的 v-html。
dangerouslySetInnerHTML接收的是一個對象鍵值對
<div dangerouslySetInnerHTML={{__html: markedHtml}}/>
代碼塊樣式 highlight
當我們在使用markdown中代碼塊時發(fā)現(xiàn)代碼塊樣式并不是我們希望的有背景色乘瓤。
這時我們要用到 highlight.js
npm install highlight.js --save
引用
import hljs from 'highlight.js/lib/highlight';
import 'highlight.js/styles/github.css'
hljs.initHighlightingOnLoad()
設(shè)置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
這時我們發(fā)現(xiàn)code標簽有類名了
markdown轉(zhuǎn)為html介紹到這里环形，有錯誤和更好的方法的大家積極交流，歡迎留言衙傀！
