引言

我们在制作个人的博客系统或类似的项目时,写博客以及将写好的博客展示出来便是绕不开的基本功能,好在目前已有相关的开源插件给开发者使用。本文将总结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,找不到了,就不介绍了╮(╯▽╰)╭,大家可以在官网自行了解,如果哪天我再做的时候补充吧~~

Logo

前往低代码交流专区

更多推荐