vue实现markdown及代码高亮

Install mavon-editor (安装)

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'

// use

Vue.use(mavonEditor)

页面加载mavon-editor

mavon-editor标签属性:props

toolbars:

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, // 帮助 /* 1.3.5 */

    undo: true, // 上一步

    redo: true, // 下一步

    trash: true, // 清空

    save: true, // 保存（触发events中的save事件） /* 1.4.2 */

    navigation: true, // 导航目录 /* 2.1.8 */

    alignleft: true, // 左对齐

    aligncenter: true, // 居中

    alignright: true, // 右对齐 /* 2.2.1 */

    subfield: true, // 单双栏模式

    preview: true, // 预览

}

Events事件:events

图片上传：imagheUpload

github地址

代码高亮

1.安装highlight.js

npm install highlight.js

2.在main.js中引入highlight.js

impor thljs from 'highlight.js';

import 'highlight.js/styles/atom-one-dark.css' //样式

3.在main.js中自定义指令

Vue.directive('highlight',function(el){

    let blocks = el.querySelectorAll('pre code');

    blocks.forEach((block)=>{

        hljs.highlightBlock(block)

    })

})

4.在需要高亮内容标签使用 v-highlight