HTML 访问本地 Markdown 文件

最新推荐文章于 2024-03-19 16:04:59 发布

蜜汁小强

最新推荐文章于 2024-03-19 16:04:59 发布

阅读量1.3w

点赞数

分类专栏： javascript markdown 文章标签： markdown jquery 开源项目

本文链接：https://blog.csdn.net/wxqee/article/details/48326617

版权

javascript 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

markdown

1 篇文章 0 订阅

订阅专栏

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—

蜜汁小强

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
HTML 访问本地 Markdown 文件

HTML 访问本地 Markdown 文件目的 - 我们有一个满文件的 Markdown 文件，需要以HTML的方式展示。方法 - 使用 HTML 静态文件，引入 jquery 以及 markdown-it 代码库，帮我们的 HTML 拥有处理能力。假设 - 参考非常简单的开源项目 wxqee/markdown-html-example 1. 我们已经有个 readme.md 2. 我们已经启动
复制链接

扫一扫