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

JavaScript015

前端小技巧:加载并解析Markdown文档,第1张

移步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说明文档

根据你生成的路径用markdown表示出来

例如你发布的一个地址是

www.gatsbyjs.org/blog/2020-03-23-Flying-Feature-Flags-with-New-LaunchDarkly-plugin

在另一个markdown文件里写

[跳过去](/blog/2020-03-23-Flying-Feature-Flags-with-New-LaunchDarkly-plugin)

marked.js是一个用JavaScript写的功能齐全的Markdown解析器和编译器。可以非常方便的在线编译Markdown代码为HTML并直接显示,并且支持完全的自定义各种格式。

使用案例:

var marked = require('marked')console.log(marked('I am using __markdown__.'))// Outputs: <p>I am using <strong>markdown</strong>.</p>

var marked = require('marked')marked.setOptions({renderer: new marked.Renderer(),gfm: true,tables: true,breaks: false,pedantic: false,sanitize: false,smartLists: true,smartypants: false})console.log(marked('I am using __markdown__.'))

<!doctype html><html><head> <meta charset="utf-8"/> <title>Marked in the browser</title> <script src="lib/marked.js"></script></head><body> <div id="content"></div> <script> document.getElementById('content').innerHTML =marked('# Marked in browser\n\nRendered by **marked**.') </script></body></html>