前言

本篇基于vue、axios、marked框架

vue、axios、marked框架的网盘下载地址
（vue是vue2.x）
链接：https://pan.baidu.com/s/1YY-_GkYX_QXX6es4xzdyDQ
提取码：arco
复制这段内容后打开百度网盘手机App，操作更方便哦

一、HTML代码

引用的css文件是我自己写的，这里的主体功能并不需要

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<link href="CSS/markdown-content.css" rel="stylesheet">
<script src="JS/vue.js"></script>
<script src="JS/axios.min.js"></script>
<script src="./JS/marked.js"></script>
<body>

<div id="md" v-html="content" class="markdown-daymodel"></div>

<script>
	var md = new Vue({
		el:'#md',
		data:{
			article:'MARKDOWN/文章模板.md',
			content:''
		},
		mounted(){
			axios({
				url:this.article
				}).then(res=>{
					console.log(res.data);
					this.content = marked(res.data);
				})
			
			}
	})
</script>

</body>
</html>

二、步骤

1.axios方法里的url填markdown文档的路径，这里是用data里的article进行赋值

2.res=>里将用marked框架解析出的markdown文档的值赋给div的innerHTML

3.然后可以自己定义类，使用css文件修改markdown文档的样式

缺点

这个方法能显示上传的md文件，但不能实现在线编辑

原文链接：https://blog.csdn.net/weixin_44919664/article/details/113294311