這篇文章講vue項目及nuxt項目中使用mavon-editor並改變代碼塊的樣式、高亮樣式，新增功能：代碼塊行數、一鍵複製代碼。先附一張圖。

我博客連接：安哥個人博客

這個是nuxt項目mavon-editor的樣式，接下來廢話不多說開始。

1. vue的mavon-editor使用

• 先安裝mavon-editor

npm install mavon-editor或者yarn add mavon-editor

• 在main.js全局引入使用

import mavonEditor from "mavon-editor"import "mavon-editor/dist/css/index.css"Vue.use(mavonEditor)

• 在你的組件中使用

html代碼

<template>  <div class="dashboard-container"><mavon-editor  v-model="context"  :toolbars="toolbars"/>  </div></template>

js代碼

<script>export default {  name: "Article",  data() {return {  context: "", // 輸入的數據  toolbars: { bold: true, // 粗體 italic: true, // 斜體 header: true, // 標題 underline: true, // 下劃線 strikethrough: true, // 中劃線 mark: true, // 標記 superscript: true, // 上角標 subscript: true, // 下角標 quote: true, // 引用 ol: true, // 有序列表 ul: true, // 無序列表 link: true, // 鏈接 imagelink: true, // 圖片鏈接 code: true, // code table: true, // 表格 fullscreen: true, // 全屏編輯 readmodel: true, // 沉浸式閱讀 htmlcode: true, // 展示html源碼 help: true, // 幫助 undo: true, // 上一步 redo: true, // 下一步 trash: true, // 清空 save: true, // 保存（觸發events中的save事件） navigation: true, // 導航目錄 alignleft: true, // 左對齊 aligncenter: true, // 居中 alignright: true, // 右對齊 subfield: true, // 單雙欄模式 preview: true // 預覽  },}  },  mounted() {},  methods: {}}</script>

然後就可以使用了

2. nuxt的mavon-editor使用

• 先安裝mavon-editor

npm install mavon-editor或者yarn add mavon-editor

• 在plugins下新建vueMarkdown.js，並加入以下代碼

import mavonEditor from "mavon-editor"import "mavon-editor/dist/css/index.css"Vue.use(mavonEditor)

• 在nuxt.config.js下加入以下代碼

引入剛剛創建好的vueMarkdown.js插件

module.exports = {  ...  css: ["mavon-editor/dist/css/index.css",  ],  plugins: [{ src: "@/plugins/vueMarkdown", ssr: false },  ],  ...}

• 在你的組件中使用

html代碼

Tips：你後臺管理項目保存好的mavon-editor的markdown格式到數據庫，然後前臺nuxt項目取數據後只是為了預覽展示，所以default-open="preview",其他為false。

<script>export default {  name: "Article",  data() {return {  content: "", // 輸入的數據  },}  },  mounted() {},  methods: {}}</script>

3. nuxt自定義代碼塊樣式、代碼塊高亮、代碼塊複製按鈕、代碼行數功能

就是這玩意搞了我兩個星期。。。直接附上代碼（有註釋）

然後代碼有個地方寫了setInterval就是為了解決不顯示代碼行數的bug