vue实现markdown编辑器以及md文件转化成html

引言

我们在制作个人的博客系统或类似的项目时，写博客以及将写好的博客展示出来便是绕不开的基本功能，好在目前已有相关的开源插件给开发者使用。本文将总结mavon-editor插件和marked插件的使用方法，通过vue实现markdown编辑器，以及将markdown文件转换成对应的html，并自定义CSS。

vue实现markdown编辑器

mavon-editor是一款基于vue的markdown编辑器，可以帮助开发者快速实现markdown编辑器。下面将介绍基本使用方式。

mavon-editor的安装

npm install mavon-editor --save

mavon-editor的基本使用

在vue-cli构建脚手架项目的main.js中，引入mavon-editor

//全局注册基于Vue的markdown编辑器mavon-editor
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
//使用mavon-editor
Vue.use(mavonEditor)

在具体html或vue模板中定义挂载点

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

其中value就是绑定的md文本，页面效果如下。

其上方的工具栏可通过props中的toolbars自由选择，例如下面编辑器不需要斜体功能，需要粗体功能，默认全部功能开启。

toolbars: {
      bold: true, // 粗体
      italic: false, // 斜体
}

events事件绑定中，有save的函数，点击工具栏上方的保存按钮时触发事件，我们可以将写好的md文本通过该函数保存到后台。

更详细的使用方式详见官网：mavon-editor详细使用。

vue实现将markdown文件转化成html并渲染到浏览器

mavon-editor实现将markdown文件转化成html在浏览器展示

从mavon-editor实现的编辑器效果图可以看到右边有markdown文件的实时预览，可以将其作为转化后的页面，方法如下。（但是因为本人对前端不是太熟，感觉这种方式不方便自定义样式，所以弃用，有大佬知道这种方式怎么自定义样式可以留言教教我 ）。

在做展示的具体html或vue模板中定义挂载点

<div id="main">
       <mavon-editor
           :value="opts.api_doc"
           :boxShadow="false"
           defaultOpen="preview"
           :toolbarsFlag="false"
		/>
</div>

• 其中subfield为true时，表示编辑预览同屏， 为false时编辑预览分屏)；
• defaultOpen为edit时默认展示编辑区域 ，为preview时默认展示预览区域 ；
• toolbarsFlag代表工具栏是否显示。

marked.js实现将markdown文件转化成html在浏览器展示

最后我选择的是marked.js来解析markdown文件。

marked.js的安装

npm install marked --save

marked.js的基本使用

在vue-cli构建脚手架项目的main.js中，引入marked.js

//全局注册基于Vue的markdown编辑器mavon-editor
import marked from ‘marked‘

在具体html或vue模板中定义挂载点

    <div v-html="compiledMarkdown"></div>

使用marked函数，即可将md文本转化成html并渲染在浏览器，其中this.input就是md文件，compiledMarkdown 对应页面/模板中的挂载点。

computed: {
	compiledMarkdown : function () {
		return marked ( this.input)
	}
},

通过marked.setOptions设置渲染参数，如下：

 marked.setOptions ({
        renderer: rendererMD ,
        gfm: true ,//允许Git Hub标准的markdown.
        tables: true ,//允许支持表格语法。该选项要求 gfm 为true
        breaks: false ,//允许回车换行。该选项要求 gfm 为true。
    })

详细使用方式及相关api可参考官网：marked.js详细使用，其中的Docs标题下的链接有介绍。

一份md文件解析后在浏览器效果如下(md文件来源于以前的博客)：

自定义CSS样式

从上面的效果图可以看出其中的代码、文字和链接等都是最基本的html样式，对代码而言，我们可以引入highlight.js实现代码的高亮。

highlight.js实现代码高亮

npm install highlight.js --save//安装
import hljs from 'highlight.js'//引用
import "highlight.js/styles/monokai-sublime.css"; // 引入高亮样式 这里我用的是sublime样式

在marked.setOptions中加上：

highlight: function(code) {
	return hljs.highlightAuto(code).value;
},

最终代码效果如下。明显可以看出代码不再是纯黑字了，代码、关键字、注释等都有不同颜色和亮度，高亮样式有很多种，我这种是sublime样式，具体可以参考highlight.js中文网

给标题、文本、表格等自定义CSS样式

对于普通文本、表格、序列和链接等，我们可以设置自己的样式。

只需要再挂载的div上加上class即可。

//mymarkdown-body就是对应的class选择器
<div class="mymarkdown-body" v-html= "compiledMarkdown"></div>

比如一个#对应的html标签是< h1 >，那么我们只需要对h1定义一下样式即可，比如我在mymarkdown-body.css文件中定义h1的字体大小为100px。

.mymarkdown-body h1 {
    font-size: 100px
}
.mymarkdown-body blockquote {
    display: block;
    margin: 0 0 12px;
    border-left: 8px solid #dddfe4;
    background: #eef0f4;
    overflow: auto;
}
.mymarkdown-body a {
    color: #4ea1db;
    text-decoration: none;
}

最后h1标题的文字效果就变成了下图。

blockquote 和a对应的是引用块和链接的样式，是不是跟CSDN解析出来的差不多？

同样的，我们可以对其他的标签样式进行修改，毕竟常用的markdown语法并不是太多。可能很多人觉得慢慢调试样式很麻烦，这里我用的一个方式是，找到一个差不多的网页，比如博客的话，找CSDN，打开一篇文章，按F12，就可以看到对应文本的CSS样式，然后把它复制过来，稍微改改就行了。

(待补充)官方样式

如果不自定义样式，marked.js和mavon-editor也都有自带的样式，大家可以在官方文档当中选择使用，我原本也有个官方样式的demo，找不到了，就不介绍了╮(╯▽╰)╭，大家可以在官网自行了解，如果哪天我再做的时候补充吧~~