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 很适合于技术写作,因为技术写作并不需要花哨的排版和内容, 只要内容生动而严谨,文笔朴实而优美. 为了编写对读者更友好的文章,有必要生成文章的标题导航 ...
随机推荐
- ARC082E ConvexScore（神奇思路）
这题就是拼拼凑凑就出来了. 可能看英文题面容易题意杀(小写大写 \(n,N\)),这里复述一遍:对于每个构成凸多边形的点集(每个点恰好都是凸多边形的顶点,必须是严格的凸多边形,内角严格小于 180 度 ...
- 宝塔面板+djiango+mod wsgi +apache 配置多项目站点
在一台服务器上同时有多个djiango项目,那么就需要配置多站点,利用不同的域名不同的端口 同时存在多个项目. 环境,centos + 宝塔面板+apache+django 1.在centos环境下 ...
- 二、Spring注解之@Conditional
Spring注解之@Conditional [1]@Conditional介绍 @Conditional是Spring4新提供的注解,它的作用是按照一定的条件进行判断,满足条件给容器注册bean. ...
- 我的周记12——"站在现在看前人对未来的预测，很有意思"
万里风云三尺剑,一庭花草半床书 聊聊最近很火的5G B站有个up主 老师好我叫何同学 优秀啊,点赞. 他做了一个5G测速的视频火啦 视频链接:https://www.bilibili.com/vi ...
- 奥展项目笔记07--vue绑定下拉框和checkbox总结
1.vue绑定下拉框 <div class="col-md-1 data"> <select class="form-control " v- ...
- ssh工具推荐MobaXterm 可能是你遇到过的比较出色的一款
之前一直用xshell,现在推荐一个更好用的工具. 一站式的解决你的需求,而且画风个人也比较喜欢,而且随便一百度就能找得到green PJ 的版本
- Hyper V NAT 网络设置 固定IP / DHCP
Hyper V 默认的Default Switch同时支持了NAT网络以及DHCP,虚拟机能够访问外网. 但使用过程中发现这个IP网段经常变化,而且Hyper V没有提供管理其NAT网络与DHCP的图 ...
- 2019-11-25-加强版在国内分发-UWP-应用正确方式-通过win32安装UWP应用
原文:2019-11-25-加强版在国内分发-UWP-应用正确方式-通过win32安装UWP应用 title author date CreateTime categories 加强版在国内分发 UW ...
- SQL Server中INSERT EXEC语句不能嵌套使用（转载）
问: I have three stored procedures Sp1, Sp2 and Sp3.The first one (Sp1) will execute the second one ( ...
- 基本认证（Basic Authorization）
---------------------------------- import arcpy from base64 import encodestring username = 'xxx' pas ...