侧边栏壁纸
博主头像
liuxy博主等级

细水长流,吃穿不愁

  • 累计撰写 39 篇文章
  • 累计创建 30 个标签
  • 累计收到 6 条评论

目 录CONTENT

文章目录
vue

vue中使用markdown

liuxy
2022-08-05 / 2 评论 / 5 点赞 / 1,296 阅读 / 239 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-08-23,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

1.安装 vue-markdown-loader

将markdown文件解析并编译成html文件

npm install vue-markdown-loader  -D

2.安装 vue-loader 、vue-template-compiler

将文件渲染成vue组件

npm install vue-loader  -D
npm install vue-template-compiler  -D

3.安装 github-markdown-css、highlight.js

美化样式、高亮代码

npm install github-markdown-css  -D
npm install highlight.js  -D

4.在vue.config.js中配置webpack

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
      })
  }
}

5.在main.js中引入样式文件

// markdown样式 import 'github-markdown-css' // 代码高亮 import 'highlight.js/styles/github.css'

6.在vue组件中使用

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

<template>
  <demo-md class="markdown-body"></demo-md>
</template>

<script>
import DemoMd from './demo.md';
export default {
  components: {
    DemoMd
  }
}
</script>
5
广告 广告

评论区