js 加载并解析Markdown文档
网上有很多网站会通过.md文档来做页面内容(比如，阮一峰老师的es6入门blog: http://es6.ruanyifeng.com/)，很好奇，这是怎么做的？（至于.md是什么，或许（https://www.runoob.com/markdown/md-tutorial.html）这里会有答案）
出于好奇，建了一个test.md文件：
# Hello World!
asdfa
asd
*斜体文本*
**粗体文本**
***斜粗体文本***
分隔线（如下）
***
* * *
****
- - -
-----------
GOOGLE.COM
~~删除线~~
<u>下划线</u>
用浏览器打开之后，结果就被原封不动的输出来了，浏览器根本不会解析这玩意... 跟阮老师的blog相差好大啊~ 呵呵~ 还是太天真了！
然后，发现：
原来markdown文本还是需要用marked.js这么一个库来解析的！于是乎，依葫芦画个瓢
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>md文档内容转成html显示</title>
</head>
<body>
<div id="content" style="width: 500px;height: 500px;overflow: auto"></div>
<div style="margin-top: 30px">
<form name="form" action="" method="post">
<select name="q">
<option value="md/gs.md">公式</option>
<option value="md/test.md">第一个Markdown文档</option>
</select>
<input type="button" value="显示" onclick="showMarkdown()">
</form>
</div>
<script type="text/javascript" src='https://cdn.jsdelivr.net/npm/marked/marked.min.js'></script>
<script type="text/javascript">
function showMarkdown() {
var f = form;
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject('Microsoft.XMLHttp');
} xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById('content').innerHTML = marked(xmlhttp.responseText);
}
} // 向服务器发送请求
xmlhttp.open('GET', f.q.value, true);
xmlhttp.send();
}
</script>
</body>
</html>
于是就有了下面的样子：
原理就是用ajax请求，取到 .md文件里的内容，再通过marked.js提供的marked()方法将markdown语法的文本转成html文档。
js 加载并解析Markdown文档的更多相关文章
- C#解析Markdown文档，实现替换图片链接操作
前言 又是好久没写博客了 其实也不是没写,是最近在「做一个博客」,从2月21日开始,大概一个多星期的时间,疯狂刷进度,边写代码边写了一整系列的博客开发笔记,目前为止已经写了16篇了,然后上3月之后工作 ...
- python实现解析markdown文档中的图片，并且保存到本地~
背景 前阵子简书好像说是凉了,搞得我有点小慌,毕竟我的大部分博客都是放在简书上面的,虽然简书提供了打包导出功能,但是只能导出文字,图片的话还是存在简书服务器上面,再加上我一直想要重新做一个个人博客,于 ...
- Android中使用POI加载与显示word文档
最近打算实现一个功能:在Android中加载显示Word文档,当然这里不是使用外部程序打开.查看一些资料后,打算采用poi实现,确定了以下实现思路: 将ftp中的word文档下载到本地. 调用poi将 ...
- c# 创建，加载，修改XML文档
using System.Xml.Linq; static void Main(string[] args) { XDocument xDocument = new XDocument(new XEl ...
- iOS - 开发中加载本地word/pdf文档说明
最近项目中要加载一个本地的word/pdf等文件比如<用户隐私政策><用户注册说明>,有两种方法加载 > 用QLPreviewController控制器实现 步骤 : & ...
- scala 加载与保存xml文档
package scala_enhance.xml import scala.xml.XML import scala.io.Source import jdk.internal.org.xml.sa ...
- Android，加载离线Android API文档缓慢问题！
解决方法:在host文件末添加如下信息! 0.0.0.0 www.googleapis.com 0.0.0.0 www.google.com 0.0.0.0 www.google-analytics. ...
- C#实现生成Markdown文档目录树
前言 之前我写了一篇关于C#处理Markdown文档的文章:C#解析Markdown文档,实现替换图片链接操作 算是第一次尝试使用C#处理Markdown文档,然后最近又把博客网站的前台改了一下,目前 ...
- 使用Python从Markdown文档中自动生成标题导航
概述 知识与思路 代码实现 概述 Markdown 很适合于技术写作,因为技术写作并不需要花哨的排版和内容, 只要内容生动而严谨,文笔朴实而优美. 为了编写对读者更友好的文章,有必要生成文章的标题导航 ...
随机推荐
- 重构与模式 (Joshua Kerievsky 著)
第1章 本书的写作缘由 第2章 重构 第3章 模式 第4章 代码坏味 第5章 模式导向的重构目录 第6章 创建 第7章 简化 第8章 泛化 第9章 保护 第10章 聚集操作 第11章 实用重构 参考文 ...
- MySQL实战45讲学习笔记：第三十六讲
一.引子 今天是大年三十,在开始我们今天的学习之前,我要先和你道一声春节快乐! 在上一篇文章中,我们在优化 join 查询的时候使用到了临时表.当时,我们是这么用的: create temporary ...
- PMP图表（必背）
- Springboot使用ehcache缓存
本文部分步骤继承于springboot使用cache缓存,如果有不清楚的,请移驾springboot使用cache缓存 ehcache是一种广泛使用的开源Java分布式缓存.主要面向通用缓存,Java ...
- CodeForce 117C Cycle DFS
A tournament is a directed graph without self-loops in which every pair of vertexes is connected by ...
- Layui新手教程----帮助小白少走弯路
Layui的学习 Layui官方文档:https://www.layui.com/ 先说说为啥我接触到了layui,因为需要去参与做一个项目,被学长推荐去学习layui,用来处理一些前端的问题. La ...
- .Net轻松处理亿级数据--clickhouse及可视化界面安装介绍
该篇内容由个人博客点击跳转同步更新!转载请注明出处! 前言 我是在17年就听说过Clickhouse,那时还未接触过亿数据的运算,那时我在的小公司对于千万数据的解决方案还停留在分库分表,最好的也是使用 ...
- spring的一些概念及优点
Spring是一个轻量级的DI和AOP容器框架.说它轻量级有一大部分原因是相对于EJB的(虽然本人从来没有接触过EJB的应用),但重要的是Spring是非侵入式的,基于Spring开发应用一般不依赖于 ...
- RocketMQ多master迁移至多master多slave模式
一.项目背景 由于当前生产环境RocketMQ机器使用年限较长,已经过保,并且其中一台曾经发生过异常宕机事件.并且早期网络规划较乱,生产.开发.测试等网络没有分开,公司决定对当前网络进行规划,区分各个 ...
- 异步IO/协程/数据库/队列/缓存（转）
原文:Python之路,Day9 - 异步IO\数据库\队列\缓存 作者:金角大王Alex add by zhj: 文章很长 引子 到目前为止,我们已经学了网络并发编程的2个套路, 多进程,多线程,这 ...