mavonEditor ---基于Vue的markdown编辑器

1、安装mavonEditor

$ npm install mavon-editor --save

 或者

$ yarn add mavon-editor

在main.js中

全局使用

import   mavonEditor   from   'mavon-editor'

import  'mavon-editor/dist/css/index.css'

Vue.use(mavonEditor)

使用


2、使用marked将markdown语法解析成html并且高亮代码

安装marked插件

npm install marked --save

var renderer = new marked.Renderer();

安装highlight.js

import highlightJs from 'highlight.js';

开始使用

  marked.setOptions({

        highlight: (code) => highlightJs.highlightAuto(code).value

})


渲染数据

let highlight_code = marked(response.body.data.content) 

this.message_text = highlight_code;

更多mavonEditor使用参考::https://github.com/hinesboy/mavonEditor/tree/master/doc/cn

包含markdown使用,配置安装,参数

你可能感兴趣的:(mavonEditor ---基于Vue的markdown编辑器)