MarkDown

github: https://github.com/QingWei-Li/vue-markdown-loader

安装依赖

npm i vue-markdown-loader -D

# 样式
npm i github-markdown-css -D
npm i highlight.js -D


  

 

  
1
  
2
  
3
  
4
  
5
  
6
 

vue.config.js 中配置

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, preventExtract: true });
};

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
 

使用

<template>
  <!-- class markdown-body 必须加，否则标签样式会出现问题 -->
  <div class="markdown-body"> <about />
  </div>
</template>

<script>
  import about from "./about.md";
  // 代码高亮
  import "highlight.js/styles/github.css";
  // 其他元素使用 github 的样式
  import "github-markdown-css"; export default { components: { about }
  };
</script>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
 

ref
在 vue 中显示 markdown（.md)文件

文章来源: pengshiyu.blog.csdn.net，作者：彭世瑜，版权归原作者所有，如需转载，请联系作者。

原文链接：pengshiyu.blog.csdn.net/article/details/116308124