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 (
      <div>
        <div>
            {strHtml}
        </div>
      </div>
    )
  }
}

export default Test

執行上面的代碼頁面顯示的結果

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;
        }
    }
})

這時我們發現code標籤有類名了

markdown轉爲html介紹到這裏，有錯誤和更好的方法的大家積極交流，歡迎留言！