vue渲染.md文件

1. 在package.json文件安装以下依赖,npm install

"dependencies": {
	"github-markdown-css": "^5.1.0",
    "highlight.js": "^11.5.1",
    "html-loader": "^3.1.0",
    "markdown-loader": "^8.0.0",
    "vue-loader": "15",
    "vue-markdown-loader": "^2.5.0",
    "vue-template-compiler": "^2.6.10"
}

2. vue.config.js中添加以下配置:

module.exports = {
  // 下面是要增加的配置
  chainWebpack: (config) => {
  	config.module
      .rule('md')
      .test(/\.md$/)
      .use('vue-loader')
      .loader('vue-loader')
      .end()
      .use('vue-markdown-loader')
      .loader('vue-markdown-loader/lib/markdown-compiler')
      .options({
        raw: true
      })
  }
}

3. 在mian.js引入

// markdown样式
import 'github-markdown-css'
// 代码高亮
import 'highlight.js/styles/github.css'
import hljs from 'highlight.js'
Vue.directive('highlight', function(el) {
  const blocks = el.querySelectorAll('pre code')
  blocks.forEach(block => {
    hljs.highlightBlock(block)
  })
})

4. 在vue组件中使用

将md文件作为组件导入,注意:class的值必须包含 markdown-body ,否则样式无法生效;v-highlight是高亮

<template>
	<platform-md v-highlight class="markdown-body"></platform-md>
</template>
<script>
import PlatformMd from '@/assets/docs/Platform.md'
export default {
  components: {
    PlatformMd
  }
}
</script>

显示效果如下:

在这里插入图片描述

相关链接:

highlight.js官网

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值