vue2项目引入markdown进行展示

请安装以下插件

le-markdown-editor: 一个vue的markdown编辑器组件,在支持常规markdown语法的基础上添加了图片上传、多主题切换、流程图支持和一系列便捷的功能,演示地址:http://47.100.125.98 (gitee.com)

npm i le-markdown-editor --save

配置

1、在main.js中,对组件进行引入

import leMarkdownEditor from 'le-markdown-editor'

Vue.use(leMarkdownEditor)

2、在想要展示markdown文件的地方写入组件

 <le-preview ref="md-preview" :is-md="true" :value="value" :hljs-css="hljsCss"></le-preview>

3、在data中进行如下配置

const md = require('./sql.md') 
export default {
    data() {
      return {
        hljsCss: 'agate',
        value: md
      }
    },

注意所展示的md文件路径

4、配置webpack.base.conf.js

在module中的rules增加一个配置规则

 {
     test: /\.md$/,
     use: ["text-loader"]
 }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值