vue展示markdown

安装github-markdown-css

npm install github-markdown-css

使用

导入github-markdown.css文件并将markdown-body类添加到渲染的Markdown的容器中，并为其设置宽度。 GitHub使用980px宽度和45px填充，以及15px填充用于移动设备。

<article class="markdown-body" v-html="marked转换过的markdown内容">
</article>

安装marked

npm install marked --save
//在vue组件中导入
import marked from 'marked'
computed: {
mdData: function () {
  return marked(this.htmlMD, {
    renderer: new marked.Renderer(),
    higlight: function (code, lang, callback) {
      return require('highlight.js').highlight(lang, code).value
    },
    langPrefix: 'hljs ',
    pedantic: false,
    gfm: true,
    tables: true,
    breaks: false,
    sanitize: false,
    smartLists: true,
    smartypants: false,
    xhtml: false
  })
}

}

安装highlight.js

npm install --save highlight.js