个人中心
gpt4 book ai didi

vue导入.md文件的步骤（markdown转HTML）

转载 作者：qq735679552 更新时间：2022-09-27 22:32:09 32 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章vue导入.md文件的步骤（markdown转HTML）由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

前言

　　刚接到这个需求的时候，觉得很简单（的确很简单）但是这玩意的坑真的也让人无奈.

　　网上找了很多的资料，都没有写出痛点（这就很难过了）。通过实践并且在我们项目中平稳运行，想分享给后面的人 。

　　我的博客上也写了100多篇文章，点击量有上万的也有个位数的，能够帮助到他人这就是写作记录的动力.

需求

　　vue项目中可以良好展示markdown（只是展示功能 没有编辑功能） 。

痛点问题

  1. .md文件类型，直接模块加载（只有字符串，这得多难受，怎么维护呢），还是一个文件一个文件的好维护并且好修改复用
  2. 用第三方插件，只是md转HTML，不带样式的（重点强调 没有样式没有样式）

解决方案

1、vue需要有markdown这样良好的展示效果，什么样的插件是最好的？

　　货比三家，我推荐以下方式 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
//安装
npm install --save html-loader;
npm install -- save markdown-loader;
 
//webpack
  {
    test: /\.md$/,
    loader: "html-loader" ,
  },
  {
    test: /\.md$/,
    loader: "markdown-loader"
  }

　　大坑预警：我不知道在哪里抄的配置，一定不要配置option（配置了的话表格 代码 都不能好好转化） 。

　　以上真的就完成了转化了。是不是so easy ！！！ 再来换个皮肤（穿上衣服） 。

2、一定要引用CSS，找了很多样式真的都特别的丑（当然可以自己写，但是费时间啊）

　　强烈推荐 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
npm install github-markdown-css
import 'github-markdown-css' ; //哪里用markdown 就在哪里引用 可以放在min.js
 
//自己也可以再调整调整 (贡献一版 我们调整的一版样式)
.markdown-body {
  padding : 20px ;
  min-width : 200px ;
  max-width : 900px ;
  font-size : 12px ;
  h 2 {
  font-size : 18px ;
  margin : 1em 0 15px ;
  padding-top : 0.8em ;
  padding-bottom : 0.8em ;
  }
  h 3 {
  font-size : 14px ;
  margin : 22px 0 16px ;
  }
  h 4 {
  font-size : 13px ;
  margin : 20px 0 16px ;
  }
  h 5 {
  font-size : 12px ;
  margin : 16px 0 16px ;
  font-weight : 700 ;
  }
  p {
  font-size : 12px ;
  line-height : 24px ;
  color : #666666 ;
  margin-top : 0px ;
  margin : 8px 0 ;
  margin : 14px 0 14px ;
  }
  pre {
  background-color : #eee ;
  margin-bottom : 8px ;
  margin-top : 8px ;
  margin : 12px 0 12px ;
  }
  blockquote {
  margin-bottom : 8px ;
  margin-top : 8px ;
  margin : 14px 0 14px ;
  background-color : #eee ;
  padding : 16px 16px ;
  }
  tr {
  background-color : #f5f5f5 ;
  }
  code {
  background-color : #eee ;
  }
  ul,
  ol,
  li {
  list-style : unset;
  font-size : 12px ;
  line-height : 20px ;
  color : #666666 ;
  margin-top : 0px ;
  margin : 8px 0 ;
  }
  blockquote {
  border-color : #48b6e2 ;
  }
  table {
  display : table;
  width : 100% ;
  max-width : 100% ;
  margin-bottom : 20px ;
  }
}

3、页面运用（实践检验真理）

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
页面
< template >
  < div class = "markdown-body" v-html = "htmlMD" ></ div > //markdown-body 一定要写这个class名
</ template >
 
< script >
export default {
  name: 'GitBook',
  data() {
  return {
   htmlMD: ''
  };
  },
  mounted() {
  this.getHtmlMD(this.$route.query.databaseType);
  },
  methods: {
  getHtmlMD(type) {
   this.htmlMD = require(`./GitBook/${type.toLowerCase()}.md`); //导入md 我这里根据不同的类型拿不同md文件
  }
  }
};
</ script >

4、最终效果 （表格，代码（缩进完全没有问题）我懒的去写一个实例了）打码勿怪

vue导入.md文件的步骤（markdown转HTML）

以上就是vue导入.md文件的步骤（markdown转HTML）的详细内容，更多关于vue 导入.md文件的资料请关注我其它相关文章！ 。

原文链接：https://www.cnblogs.com/ifannie/p/14148722.html 。

最后此篇关于vue导入.md文件的步骤（markdown转HTML）的文章就讲到这里了,如果你想了解更多关于vue导入.md文件的步骤（markdown转HTML）的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

32 4 0
文章推荐： Spring Cloud Config 使用本地配置文件方式
文章推荐： 详解Mybatis（五）Mapper接口
文章推荐： Spring基于XML实现Aop
文章推荐： JavaWeb乱码问题的终极解决方案（推荐）
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com