vue使用markdown編輯器

mavon-editor

---

使用步驟

---

1。安裝mavon-editor

npm install mavon-editor -S

2。引入組件，樣式以及調用組件

import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
    
comoponents: {
    mavonEditor
}
    
<mavon-editor v-model="value"></mavon-editor>

3。前臺展現markdowm文本內容：

後臺錄入markdown語法後，獲取文章，此時數據是markdown語法格式。在前臺展現須要利用marked插件和highlight.js處理

npm install marked -S

import marked from 'marked'
var markdowncontent = "console.log('hello.word')"
this.content = marked(獲取的markdown數據內容)

4。代碼高亮

npm install highlight.js

import hljs from 'highlight.js'
import 'highlight.js/styles/default.css';  //封裝成一個指令

Vue.directive('highlight', (el) => {
    let blocks = el.querySelectorAll('pre code')
    blocks.forEach((block) => { 
        hljs.highlightBlock(block) 
    }) 
})

<div v-highlight  v-html\="content"\></div>