在前端页面显示Markdown文档
原创在前端页面显示Markdown文档
原创
法号戒糖
发布于 2024-01-10 11:11:11
发布于 2024-01-10 11:11:11
一、开坑
之前开发了一些测试工具，每次同事有需要都得单独再发他们一份，着实不太方便。我就想，要不干脆搞个测试工具平台吧。so就决定开一下测试工具平台的坑。
二、帮助页面开发
搞测试平台嘛，肯定是需要开发一个帮助页面，总不能每次同事一有问题就都来找我问怎么解决吧。
三、痛点
帮助页面，隔三岔五会有新增功能或者原有功能调整啥的，肯定是需要时常编辑和调整的，如果修改一次帮助文档，就改一次前端页面代码，那肯定是不太方便的。
四、解决思路
markdwon，各位都不陌生，页面简洁，维护简单，大家用了都说好。那么我们是不是可以直接用markdown文档来维护一份帮助文档，然后直接在前端显示呢？这样就不用修改前端代码，每次有变动，修改后端的mardown文档即可
五、技术实现
在前端显示markdown的话，有一个现成的开源js库marked.js。
前端渲染markdown的事情交给markded.js，那我们要做的事情就是在后端创建与维护一份markdown文档，在前端异步请求后端返回该文档既即可
1、引入
<script src="/static/js/marked.min.js"></script>
<script src="/static/js/jquery-3.7.1.slim.min.js"></script>
<script src="/static/js/axios.min.js"></script>2、前端页面
新增content元素用以显示markdown文档
<div id="outer" class="hc_outer">
<div id="content" class="hc_inner"></div>
</div>设置样式为水平居中
<style type="text/css">
.hc_outer {
margin-left: 20%;
margin-right: 20%;
}
.hc_inner {
width:auto;
height:auto;
position: absolute;
align-items: center;
}
</style>3、请求后端
<script type="text/javascript">
function getHelpdOC()
{
axios({
url: "/static/guide/index.md",
method: "get",
responseType: "text",
})
.then(function(response){
show(response.data)
})
.catch(function(error){
console.log(error);
})
}
function show(data){
document.getElementById("content").innerHTML = marked.parse(data)
}
getHelpDoc()
</script>4、后端维护一份markdown文档
六、遇到的问题
1、 图片显示大小
在markdown文档中，我们也markdown语法插入图片时，在本地显示图片大小是正常的，而在前端页面经过marked.js渲染后，会变得超大，打乱页面排版。
解决方法是用html语法插入图片，并设置图片尺寸
<img src="插入图片.png" width="60%"></img>原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录