Html中引入和显示Markdown文件

时间:2024-10-21 07:06:57
背景:
在使用Markdown编写开发文档时,由于Markdown语法不支持锚点跳转,于是想到把 .md文档加载到Html页面通过 a 标签里来实现跳转。
1、ajax请求加载本地md

将请求到的文件添加到 <div >

$(function(){
        $.ajax({
            type:"get",
            url:"./",
            dataType:"html",
            success:function(res){
            $("#content").append(marked(res));  // 使用marked插件解析.md文件
            }
        })
    })
2.解析

解析需使用marked插件库,将md文本转化为html DOM,框架Github地址——戳戳戳!

引入 <script src="./"></script>

3.编写css

由于转化后的md没有了基本的css样式,需要自行编写,其中代码高亮可使用Highlight插件,使用方法可参考☞《代码高亮使用》