Vue 使用 mavon-editor 将 markdown 内容转换为 html

最近在做个人博客页面的时候，需要将 markdown 格式的内容转换为 html 格式的内容，达到对内容进行排版的目的。最后找到 mavon-editor 这个插件，该插件主要用于编辑 markdown 并同步预览，这里我只是用了预览功能。

参考资料：mavon-editor github项目地址

安装

npm install mavon-editor --save

引入

在 main.js 中引入以下字段：

 // 全局注册
 // import with ES6
 import Vue from 'vue'
 import mavonEditor from 'mavon-editor'
 import 'mavon-editor/dist/css/index.css'

使用

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

:value="detailContent.content"：引入要转换的内容
:subfield = "false"：开启单栏模式
:defaultOpen = "'preview'"：默认展示预览区域
:toolbarsFlag = "false"：关闭工具栏
:editable="false"：不允许编辑
scrollStyle="true"：开启滚动条样式(暂时仅支持chrome)
:ishljs = "true"：开启代码高亮

最后结果如下：