支持markdown数据显示格式

vue项目

markedjs 解析 markdown数据
安装 npm i marked
github:https://github.com/markedjs/marked

import marked from ‘marked’
export default {
data() {
return {
str: ‘js\n function(){\n\t console.log("hello")\n} \n’
}
},
methods: {
test (str) {
return marked(str)
}
}
}

代码高亮 highlight.js

import hljs from “highlight.js”
import ‘highlight.js/styles/monokai-sublime.css’
配置marked
marked.setOptions({
renderer: new marked.Renderer(),
highlight: function(code) {
return hljs.highlightAuto(code).value
},
pedantic: false,
gfm: true,
tables: true,
breaks: false,
sanitize: false,
smartLists: true,
smartypants: false,
xhtml: false
})
marked解析之后加样式
github:https://github.com/sindresorhus/github-markdown-css
import ‘github-markdown-css’

标题，表格，无序有序列表等样式（加class名markdown-body）