600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > HTML 访问本地 Markdown 文件

HTML 访问本地 Markdown 文件

时间:2021-05-14 15:09:15

相关推荐

HTML 访问本地 Markdown 文件

HTML 访问本地 Markdown 文件

目的- 我们有一个满文件的 Markdown 文件,需要以HTML的方式展示。

方法- 使用 HTML 静态文件,引入jquery以及markdown-it代码库,帮我们的 HTML 拥有处理能力。

假设- 参考非常简单的开源项目 wxqee/markdown-html-example

1. 我们已经有个 readme.md

2. 我们已经启动了一个 HTTP 服务器在当前目录

创建一个 Markdown 转为 HTML 的网页

功能当访问http://localhost:8000/markdown.html?md=readme.md的时候,你就直接能看到 HTML 展示出来的readme.md内容。

markdown.html

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Markdown Player</title><link href="///skeleton/2.0.4/skeleton.css" rel="stylesheet"><script src="///jquery/3.0.0-alpha1/jquery.js"></script><script src="///markdown-it/4.4.0/markdown-it.min.js"></script><script>window.searchMap = location.search.substr(1).split('&').reduce(function(r, it) {var them = it.split('='); r[them[0]] = them[1]; return r;}, {});$.ajaxSetup({async: false});</script></head><body><div class="markdown-html"><script>$.get(searchMap.md, function(text) {document.write(markdownit().render(text)); });</script></div></body></html>

讲解- 核心就是markdown-it的JavaScript代码库,可以通过markdownti().render(text)来获取text变量保存的markdown信息转换为html之后的文本。

—Over—

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。