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 访问本地 Markdown 文件相关推荐

python博客下载本地文件_解决django无法访问本地static文件(js,css,img)网页里js,cs都加载不了...
1.今天网上下载一个博客项目,发现本地访问,js,css加载不了. 我想应该是项目上线的安全措施,但是我想调试项目.找到方法如下在settings.py里面编辑添加 STATICFILES_DIR ...
80.简单搭建nodeJS服务，访问本地站点文件
转自:https://blog.csdn.net/iteye_1217/article/details/82679843 搭建nodejs服务器步骤: 1.安装nodejs服务(从官网下载安装),no ...
如何通过浏览器访问本地电脑文件
如何通过浏览器访问本地电脑文件首先,打开控制面板,找到"程序"点击打开. 找到"启用或关闭windows功能",点击打开找到"Internet I ...
本地markdown文件自动生成|图片批量压缩并转base64格式|告别图床服务器|博文神器
一.项目简介问题来源每次本地写好markdown格式的文档后,想要将它上传到博客网站上,但是本地的图片无法直接复制到网站的博客页面,每个图片需要重新点击上传,然后上传本地文件.其实也可以买一个图床 ...
[开源] 分享导出博客园文章成本地 Markdown 文件存储的工具
此文主要分享了如何将自己博客园的文章自动导出到 Markdown 文档进行存储,以便在本地进行归档管理,程序中也对文章的分类.tag.代码块以及文章中的图片进行了保存处理,以便上传到自己的图. 整理后 ...
jdk1.8版本下访问本地数据库文件(access数据库.mdb)与(火鸟数据库.fdb)踩坑记录
项目场景: 具体场景是需要访问另一C/S架构软件生成的本地数据库,有两种,第一种是access数据库.mdb,第二种是闻所未闻的火鸟数据库.fdb文件,将二者中的数据提取出来入mysql.(期间走了很 ...
spring html访问统计,spring-mvc访问本地html文件(示例代码)
项目中要用到在线预览word文档,刚开始考虑是要将word转成pdf文件,然后再直接在浏览器打开pdf文档即可, 但是项目部署在Linux下,在网上搜了一下没有找到合适的方法, 后来项目组讨论用POI ...
js ajax的请求地址不正确,使用香草JS AJAX请求访问本地JSON文件时出现CORS错误？...
我正在尝试使用香草JS AJAX请求从本地存储的JSON文件中拉回JSON字符串(特别是尝试不使用JQuery)-以下代码基于此答案 -但我在Chrome控制台中不断收到错误(见下文).有什么想法我要 ...
关于ajax访问本地json文件报错404的问题
错误: 1)文件结构目录: json文件放在src文件夹下,js文件放在js文件夹下,json与js文件夹均与.html文件为兄弟(siblings)关系. 2)js文件引入json文件ajax写法如 ...

HTML 访问本地 Markdown 文件

HTML 访问本地 Markdown 文件

创建一个 Markdown 转为 HTML 的网页

markdown.html

HTML 访问本地 Markdown 文件相关推荐

最新文章

热门文章