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

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

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