> 这里记录一下我把文章用markdown解析的一些想法把 首先，我的数据库里面有两个字段，一个保存的是markdown格式，字段名为content，另一个是markdown解析之后的html格式，字段名为html_content。 原先的时候，是在后台的markdown编辑器里面，把上面两个都保存到数据表中，然后在前端直接使用vue的 `v-html="html_content"` 来直接显示的，然后样式不好看，我就找了一个 ui 库叫github-markdown-css， 然后在使用时，导入 css 文件，然后文本那里使用css里面的 `markdown-body` 的class就行了 但是这种方式没法显示语法高亮，所以就准备升级一下，把语法高亮加上，语法高亮我选择的 `highlight.js` 刚开始是使用 `marked` 和 `highlight.js` 来实现的，实现完成之后，发现markdown没有背景, [问题在这里](https://segmentfault.com/q/1010000018579673) ，和这个人一样的问题，感觉解决比较麻烦，就换了一种方案，找到了 `markdown-it` 来实现， [文档地址](https://markdown-it.docschina.org/#%E5%AE%89%E8%A3%85)。 最后采用这个实现完成了，原理的话，是把markdown格式的文本在组件中获取到，然后导入`markdown-it`和`highlight.js`，然后在`markdown-it`里面导入`highlight.js`，再把markdown的文本传入进去，会获取到`带了语法高亮的html变量`，然后把这个变量用`v-html`渲染到模板上就行了， 最后再把`hightlight.js`的主题css导入到组件里面使用就行了。 [主题地址](https://highlightjs.org/static/demo/)

# vue项目使用的markdown编辑器 ## vue-markdown 本来在github上面先搜到了这个，但是作者似乎不怎么维护了，github上的issue有很多没有处理，然后在其中的一个issue下面发现了v-md-editor，大概一看，似乎差不多，都有精简版的编辑器，进阶版的，还有预览组件。 文档地址：https://zhaoxuhui1122.github.io/vue-markdown-docs/ ## v-md-editor(推荐) 作者一直在维护，还有一个qq群可以交流，接入也很方便，强烈推荐 文档地址：http://ckang1229.gitee.io/vue-markdown-editor/zh/