在前端加载markdown文档


前言

本篇基于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文件,但不能实现在线编辑

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 我行我“速” 设计师:Amelia_0503 返回首页