移步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>