vue markdown内容网页展示

之前使用了mavonEditor这款Markdown编辑器进行博客文章的编写，
最近在弄把博客文章进行网页展示效果，开始使用marked.js，但是代码高亮问题导致页面样式及其的丑陋。后面又在网上四处寻找方法，最后产生想法，要是能用mavonEditor将Markdown的内容展示该多好呢。

然后就在网上查询资料，最后还是找到了方法（不得不说，面向百度编程真的很妙）

首先下载好mavonEditor之后，然后在vue中引用之后，接着就是对mavonEditor这个组件的属性进行设置

<mavon-editor
    class="md"
    :value="articleInfo.content"
    codeStyle="androidstudio"
    :subfield = "false"
    :defaultOpen = "'preview'"
    :toolbarsFlag = "false"
    :editable="false"
    :scrollStyle="true"
    :ishljs = "true"/>

对于这些属性是什么意思我这边就简单解释几个
:value="articleInfo.content 是需要展示的Markdown的内容。
codeStyle="androidstudio 是代码块以什么样式展示，我这边找了好几个样式，用这个样式就和csdn的代码块样式差不多
:toolbarsFlag = "false"工具栏是否开启
:editable="false"是否可编辑
:defaultOpen = "'preview'"展示预览区域
剩下的就不多解释直接上官方文档链接和图片

https://www.npmjs.com/package/mavon-editor#props

https://github.com/hinesboy/mavonEditor/#events-%E4%BA%8B%E4%BB%B6%E7%BB%91%E5%AE%9A

以上两个官方文档链接都有对mavonEditor属性的介绍，可以灵活使用以达到自己想要的效果
这个链接是codeStyle可以选择的样式
https://github.com/hinesboy/mavonEditor/blob/HEAD/src/lib/core/hljs/lang.hljs.css.js
可以去highlight官网看各种样式的效果（仅部分效果）

https://highlightjs.org/