HTML 访问本地 Markdown 文件
2015-09-09 23:21
501 查看
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="//cdn.bootcss.com/skeleton/2.0.4/skeleton.css" rel="stylesheet"> <script src="//cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.js"></script> <script src="//cdn.bootcss.com/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—
相关文章推荐
- html页面
- HTML中引入资源相对路径
- Index for Html
- html文件中插入php代码的几种方式
- HTML 30分钟入门教程
- qmlAndriod手机加载本地Html文件
- HTML一个页面输入值跳转到另一个页面并且显示出来
- Solr建立索引时,过滤HTML标签
- logback(html页面)
- 分享将pdf转换成html格式的技巧
- html锚点定位的使用
- HTML返回上一层页面
- Visual Event插件----查看html元素绑定的事件与方法的利器
- Html 简单语法总结
- HTML移动开发跨域访问
- HTML DOCTYPE 的重要性
- HTML
- HTML 框架 frameset,frame
- Html学习笔记8
- Html学习笔记7