前端小技巧:加载并解析Markdown文档

如题所述

第1个回答  2022-07-23

移步github

作为程序猿,应该多多少少都用过Markdown,或者至少读过别人用Markdown语法写的一些文档,比如在GitHub有一个你要用的开源程序,而你又是第一回用它,那么你一般会在这个仓库的Readme里读一读开发者提供的工具说明和使用的相关信息,这部分文档一般就是用Markdown的语法写的

简单来说,Markdown就是简化阉割过的HTML,优点是语法简单高效,缺点就是HTML中一些稍微高级复杂一点的效果,比如文本居中,Markdown就无法实现,所以Markdown一般被用来写对页面排版要求不高,以文字为主的笔记和文档

如果你一开始用Markdown写了文档,想要把它放到你的网页上去,并以解析后的形式呈现

那么你有两种实现途径:

第一种方法:

第二种方法:

下面我们对 第二种方法 的实现过程进行详细的说明

上一部分已经提到,我们需要先让原始网页请求服务器中的Markdown文档

这一步需要使用AJAX(中文音译为阿甲克斯),这里先对AJAX作一个简单的科普:

对上面的脚本继续简单的说明:

那么这里有几个问题需要解答:

1. 怎么指定我想要的Markdown文档呢?

表单的显示效果如下:

点击表单中的“显示”按钮后会执行 showMarkdown( ) 函数,即 用AJAX获取Markdown文档 部分的那个函数,并且将表单选择的信息通过 form 变量传递给了 showMarkdown( ) 函数中的 f 变量

这样就通过表单设定了用户指定的Markdown文档

这里采用的是GitHub上的名为 marked 的JS框架,链接: https://github.com/markedjs/marked

要想使用这个框架,需要在html脚本的头信息中引用这个框架:

引用这个框架后就可以使用里面定义的 marked( ) 函数进行Markdown文本解析了

参考资料:

(1) 本人github笔记:AJAX学习笔记

(2) marked说明文档

相似回答