vue中使用mavonEditor 代码高亮 修改顶部工具栏

安装：$ npm install mavon-editor --save
在需要的组件里面引入：

import { mavonEditor } from 'mavon-editor'
 import 'mavon-editor/dist/css/index.css'

在组件里面写入

<div class="mavonEditor">
       <mavon-editor :codeStyle="codeStyle" :ishljs="true" :toolbars="markdownOption"  v-model="handbook"/>
   </div>

注意 codeStyle是改变主题，ishljs是代码高亮，toolbars是设置顶部工具栏，如：

 markdownOption:{
      bold: false, // 粗体
      italic: false, // 斜体
      header: false, // 标题
      underline: false, // 下划线
      strikethrough: false, // 中划线
      mark: false, // 标记
      superscript: false, // 上角标
      subscript: false, // 下角标
      quote: false// 引用
      },
      codeStyle:'monokai-sublime',//设置主题 ，
       handbook: "",//写入代码

完整代码：

<template>
  <div>
    <div class="mavonEditor">
        <mavon-editor :codeStyle="codeStyle" :ishljs="true" :toolbars="markdownOption"  v-model="handbook"/>
    </div>
  </div>
</template>

<script>
  import axios from 'axios';
  import { mavonEditor } from 'mavon-editor'
  import 'mavon-editor/dist/css/index.css'
  export default {
    name: 'Abc',
    components: {
      mavonEditor,
    },
    data() {
      return {
        handbook: "",
        markdownOption:{
          // toolbars: {
          bold: false, // 粗体
          italic: false, // 斜体
          header: false, // 标题
          underline: false, // 下划线
          strikethrough: false, // 中划线
          mark: false, // 标记
          superscript: false, // 上角标
          subscript: false, // 下角标
          quote: false, // 引用
          ol: false, // 有序列表
          ul: false, // 无序列表
          link: false, // 链接
          imagelink: false, // 图片链接
          code: false, // code
          table: false, // 表格
          fullscreen: false, // 全屏编辑
          readmodel: false, // 沉浸式阅读
          htmlcode: false, // 展示html源码
          help: false, // 帮助
          /* 1.3.5 */
          undo: false, // 上一步
          redo: false, // 下一步
          trash: false, // 清空
          save: false, // 保存（触发events中的save事件）
          /* 1.4.2 */
          navigation: false, // 导航目录
          /* 2.1.8 */
          alignleft: false, // 左对齐
          aligncenter: false, // 居中
          alignright: false, // 右对齐
          /* 2.2.1 */
          subfield: false, // 单双栏模式
          preview: false, // 预览
          },
        codeStyle:'monokai-sublime',//主题
      }
    },
    methods: {
      get(){
      this.handbook//获取内容
      }
  },

效果图：

参考连接：https://github.com/hinesboy/mavonEditor/blob/master/README.md