vue项目引入markdown

前言

咳咳，终于终于终于将我的博客项目引入了markdown了，之前博客使用的是富文本编辑器，因为最近我都是使用的markdown做笔记和写博客，而自己的项目博客是个富文本编辑器这让我很不舒服，所以花了一整个晚上的时间把我的博客项目换成了markdown编辑器，让我先用这个markdown编辑器写一个博客试试哈哈哈哈！

操作步骤

引入markdown相关插件

mavonEditor

我现在博客使用的markdown编辑器是使用的是mavonEditor
我们需要使用它的话首先需要安装

npm install mavon-editor --save

然后我们在main.js中全局引用它

// 引入markdown组件
import Vue from 'vue'
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'Vue.use(mavonEditor)new Vue({el: '#app',router,store,render: h => h(App)
})

随后我们便可以在项目中引用该组件,value绑定的是markdown的源内容

<div id="main"><mavon-editor v-model="value"/>
</div>

markdown中的图片上传

// 图片上传uploadImg(pos, $file) {// 定义上传uriconst uploadUri = 'img/blogImg/'// 定义上传对象var formData = new FormData()formData.append('file', $file)formData.append('uploadUri', uploadUri)uploadImage(formData).then(res => {// 将markdown插入的图片url更换为返回的ulthis.$refs.md.$img2Url(pos, res.data)})}

pos	$file	this.refs.md.refs.md.refs.md.img2Url
当前有插入了几张图片	文件对象	修改markdown源连接为新设置的值

更多api文档请自行查看官方文档：https://github.com/hinesboy/mavonEditor

marked

在引入了mavonEditor之后，确实是可以使用markdown编辑器写博客了，但是发现上传上去的是markdown的源代码，那得到的也只是markdown的源内容，那……谁又喜欢看这种东西呢，然后又去百度找解决的办法，发现了marked，该插件能够将markdown的内容转换为HTML格式渲染出来。
照例先安装

npm install --save marked

安装完后在需要使用到的页面引用该插件

import marked from 'marked'

然后就可以使用啦，直接调用一个方法即可转换

//  将Markdown源内容转换为HTML
this.content = marked(source)

具体使用方法可以参考
官网：https://marked.js.org/
GitHub：https://github.com/markedjs/marked

highlight

这是已经可以从Markdown转换为HTML来渲染了，但是郁闷的又来了，发现代码没有高亮显示，而且Markdown没有一点样式，非常的难看，这时又只能打开百度去找解决办法咯，就找到了highlight这个插件，这是专门用来给Markdown添加代码高亮的插件，与之相似的还有highlightjs-line-numbers.js这是用来显示行数的，但是我尝试了，好像需要JQuery才能够使用我就放弃了。
首先照例先安装

npm install --save highlight

然后在需要使用到的页面引用

// 引入代码高亮插件
import hljs from 'highlight.js'
import 'highlight.js/styles/atom-one-dark.css'
// 导入本地markdown样式
import '../../styles/markdown.css'

然后在marked转换格式之前执行一个方法

 // 展现经过markdown渲染后的htmlmarked.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})this.blogContent = marked(res.data.blogContent)

当然我也只用到了这一个地方如果有想了解更多的可以到GitHub上查看源代码
https://github.com/highlightjs/highlight.js/

总结

更换这个Markdown编辑器真的花了我不少时间，确实感觉前端对我来说好难好难，每次出一点小问题就需要好久才能够解决，当然自己做出来了也还是很有成就感的，毕竟是自己做出来的东西。
我的个人博客:http://oopsw.top:1001