vue 导入.md文件(markdown转HTML)
前言
刚接到这个需求的时候,觉得很简单(的确很简单)但是这玩意的坑真的也让人无奈。
网上找了很多的资料,都没有写出痛点(这就很难过了)。通过实践并且在我们项目中平稳运行,想分享给后面的人
我的博客上也写了100多篇文章,点击量有上万的也有个位数的,能够帮助到他人这就是写作记录的动力。
需求
vue项目中可以良好展示markdown(只是展示功能 没有编辑功能)
痛点问题
- .md文件类型,直接模块加载(只有字符串,这得多难受,怎么维护呢),还是一个文件一个文件的好维护并且好修改复用
- 用第三方插件,只是md转HTML,不带样式的(重点强调 没有样式没有样式)
解决方案
一、vue需要有markdown这样良好的展示效果,什么样的插件是最好的?
货比三家,我推荐以下方式
//安装
npm install --save html-loader;
npm install -- save markdown-loader;
//webpack
{
test: /\.md$/,
loader: "html-loader",
},
{
test: /\.md$/,
loader: "markdown-loader"
}
大坑预警:我不知道在哪里抄的配置,一定不要配置option(配置了的话表格 代码 都不能好好转化)
以上真的就完成了转化了。是不是so easy !!! 再来换个皮肤(穿上衣服)
二、一定要引用CSS,找了很多样式真的都特别的丑(当然可以自己写,但是费时间啊)
强烈推荐
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;
h2 {
font-size: 18px;
margin: 1em 0 15px;
padding-top: 0.8em;
padding-bottom: 0.8em;
}
h3 {
font-size: 14px;
margin: 22px 0 16px;
}
h4 {
font-size: 13px;
margin: 20px 0 16px;
}
h5 {
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;
}
}
三、页面运用(实践检验真理)
页面
<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>
四、最终效果 (表格,代码(缩进完全没有问题)我懒的去写一个实例了)打码勿怪
Fannie总结
经过两个月的测试,这样一套下来基本需求都满足。
如果有编辑需求:推荐mavonEditor
vue 导入.md文件(markdown转HTML)的更多相关文章
- vue展示md文件,前端读取展示markdown文件
方案1:每次都需要重新打包,每次修改都需要build 直接使用require + v-html: 核心代码如下: 1. 首先需要添加MD文件的loader就是 markdown-loader npm ...
- Vue 引入 .md 文件,解析markdown语法
module.exports = { chainWebpack: config => { config.module .rule('md') .test(/\.md$/) .use('html- ...
- .md文件 Markdown 语法说明
Markdown 语法说明 (简体中文版) / (点击查看快速入门) 概述 宗旨 兼容 HTML 特殊字符自动转换 区块元素 段落和换行 标题 区块引用 列表 代码区块 分隔线 区段元素 链接 强调 ...
- CSDN新版Markdown编辑器(Alpha 2.0版)使用示例(文首附源码.md文件)
CSDN新版Markdown编辑器(Alpha 2.0版) 使用示例 附 本文的Markdown源码: https://github.com/yanglr/AlgoSolutions/blob/mas ...
- Markdown语言.md文件
转自:http://www.kuqin.com/shuoit/20141125/343459.html 之前一直在使用github,也在上面分享了不少的项目和Demo,每次创建新项目的时候,使用的都是 ...
- 原来Github上的README.md文件这么有意思——Markdown语言详解
转载请注明出处:http://blog.csdn.net/zhaokaiqiang1992 之前一直在使用github,也在上面分享了不少的项目和Demo,每次创建新项目的时候,使用的都是默认的REA ...
- 【转录】原来Github上的README.md文件这么有意思——Markdown语言详解
之前一直在使用github,也在上面分享了不少的项目和Demo,每次创建新项目的时候,使用的都是默认的README.md文件,也不曾对这个文件有过什么了解.但是在看到别人写的项目的README.md里 ...
- Vue 导入文件import、路径@和.的区别
***import: html文件中,通过script标签引入js文件.而vue中,通过import xxx from xxx路径的方式导入文件,不光可以导入js文件. from前的:“xxx”指的是 ...
- 原来Github上的README.md文件这么有意思——Markdown语言详解(sublime text2 版本)
一直想学习 Markdown 语言,想起以前读的一篇 赵凯强 的 博客 <原来Github上的README.md文件这么有意思——Markdown语言详解>,该篇博主 使用的是Mac系统, ...
随机推荐
- CentOS7配置时间和CentOS6搭建局域网NTP
NTP 2015年8月20日 星期四 17:34 CentOS 7配置本地时区和TIME ZONE #用tzselect配置时区和time zone [root@localhost Asia]# /u ...
- Kubernetes 使用 Kubevirt 运行管理 Windows 10 操作系统
原文链接:https://fuckcloudnative.io/posts/use-kubevirt-to-manage-windows-on-kubernetes/ 最近我发现我的 Kubernet ...
- java并发编程实战《七》安全性、活跃性以及性能问题
安全性.活跃性以及性能问题 安全性问题 那什么是线程安全呢?其实本质上就是正确性,而正确性的含义就是程序按照我们期望的执行,不要让我们感到意外. 存在共享数据并且该数据会发生变化,通俗地讲就是有多个线 ...
- moviepy音视频剪辑:视频剪辑基类VideoClip的属性及方法详解
☞ ░ 前往老猿Python博文目录 ░ 一.概述 在<moviepy音视频剪辑:moviepy中的剪辑基类Clip详解>和<moviepy音视频剪辑:moviepy中的剪辑基类Cl ...
- PyQt信号connect连接槽方法时报:native Qt signal is not callable错误
专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt入门学习 老猿Python博文目录 老猿学5G博文目录 在将一个信号连接到槽方法时,程序异常退出,捕获异常 ...
- 老猿学5G扫盲贴:PDU协议数据单元、PDU连接业务和PDU会话的功能详解
专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt入门学习 老猿Python博文目录 老猿学5G博文目录 一.PDU 关于PDU在百度百科是这样定义的:协议 ...
- Python使用import导入模块时执行了模块的文件但报ModuleNotFoundError错误的愚蠢问题
老猿在学习import导入自定义模块时,搜索路径中sys.path中已经添加对应路径,发现会报ModuleNotFoundError,但对应的模块代码被执行了,代码myfib.py如下: def fi ...
- Office宏病毒免杀(1)
使用github开源工具EvilClippy进行宏病毒混淆免杀:https://github.com/outflanknl/EvilClippy/releases 注意需要将这两个文件下载在同一个文件 ...
- WinForm 加载大数据时不闪烁的ListView
自己之前做小工具的时候,遇到这个问题,记录一下... namespace 相册处理 { //将ListView重载为此新类,解决加载过程中闪烁的问题 //在designer.cs中改写: //priv ...
- 九、git学习之——git基本命令全总结
初始化一个Git仓库,使用git init命令. 添加文件到Git仓库,分两步: git add <file>,注意,可反复多次使用,添加多个文件: 使用命令git commit,完成. ...