JS加载解析Markdown文档过程详解


Posted in Javascript onMay 19, 2020

网上有很多网站会通过.md文档来做页面内容,很好奇,这是怎么做的?

出于好奇,建了一个test.md文件:

# Hello World! 
asdfa 
asd 
*斜体文本* 
**粗体文本** 
***斜粗体文本*** 
分隔线(如下) 
***
* * *
****
- - -
-----------
GOOGLE.COM 
~~删除线~~ 
<u>下划线</u>

JS加载解析Markdown文档过程详解

用浏览器打开之后,结果就被原封不动的输出来了,浏览器根本不会解析这玩意... 跟阮老师的blog相差好大啊~呵呵~还是太天真了!

然后,发现:

JS加载解析Markdown文档过程详解

原来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>

于是就有了下面的样子:

JS加载解析Markdown文档过程详解

原理就是用ajax请求,取到 .md文件里的内容,再通过marked.js提供的marked()方法将markdown语法的文本转成html文档。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery pagination插件实现无刷新分页代码
Oct 13 Javascript
jQuery页面图片伴随滚动条逐渐显示的小例子
Mar 21 Javascript
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
Sep 22 Javascript
Javascript变量作用域详解
Dec 06 Javascript
分享几种比较简单实用的JavaScript tabel切换
Dec 31 Javascript
JavaScript实现显示函数调用堆栈的方法
Apr 21 Javascript
浅谈EasyUI常用控件的禁用方法
Nov 09 Javascript
JS中的数组转变成JSON格式字符串的方法
May 09 Javascript
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
Aug 20 Javascript
VUE中v-on:click事件中获取当前dom元素的代码
Aug 22 Javascript
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
Jul 22 jQuery
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
May 19 #Javascript
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 #jQuery
jQuery AJAX应用实例总结
May 19 #jQuery
单线程JavaScript实现异步过程详解
May 19 #Javascript
vue相关配置文件详解及多环境配置详细步骤
May 19 #Javascript
JS使用for in有序获取对象数据
May 19 #Javascript
基于js实现数组相邻元素上移下移
May 19 #Javascript
You might like
PHP获取文件扩展名的4种方法
2015/11/24 PHP
CI框架中类的自动加载问题分析
2016/11/21 PHP
PHP实现cookie跨域session共享的方法分析
2019/08/23 PHP
PHP网页缓存技术优点及代码实例
2020/07/29 PHP
利用JavaScript实现新闻滚动效果(实例代码)
2013/11/27 Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
2015/02/04 Javascript
Bootstrap开发实战之响应式轮播图
2016/06/02 Javascript
JS HTML5实现拖拽移动列表效果
2020/08/27 Javascript
原生JS实现匀速图片轮播动画
2016/10/18 Javascript
jQuery输入框密码的显示隐藏【代码分享】
2017/04/29 jQuery
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
2017/05/24 Javascript
vue实现验证码输入框组件
2017/12/14 Javascript
Vue中v-for的数据分组实例
2018/03/07 Javascript
一文快速详解前端框架 Vue 最强大的功能
2019/05/21 Javascript
js实现文章目录索引导航(table of content)
2020/05/10 Javascript
JavaScript实现拖动对话框效果的实现代码
2020/10/12 Javascript
[01:05:36]VP vs TNC Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
Python tempfile模块学习笔记(临时文件)
2014/05/25 Python
详解Python2.x中对Unicode编码的使用
2015/04/03 Python
python Pygame的具体使用讲解
2017/11/03 Python
Python实现字符串的逆序 C++字符串逆序算法
2020/05/28 Python
python在文本开头插入一行的实例
2018/05/02 Python
django的settings中设置中文支持的实现
2019/04/28 Python
pandas.cut具体使用总结
2019/06/24 Python
Python通过两个dataframe用for循环求笛卡尔积
2020/04/29 Python
PyQt5-QDateEdit的简单使用操作
2020/07/12 Python
python按照list中字典的某key去重的示例代码
2020/10/13 Python
以实惠的价格提供高品质的时尚:Newchic
2018/01/18 全球购物
世界上最全面的草药补充剂和顶级品牌维生素网站:HerbsPro
2019/01/20 全球购物
汽车专业学生自我评价
2014/01/19 职场文书
总经理岗位职责范本
2014/02/02 职场文书
新闻专业毕业生英文求职信
2014/03/19 职场文书
小学生竞选班干部演讲稿
2014/04/24 职场文书
淘宝活动总结范文
2014/06/26 职场文书
党员自我剖析材料范文
2014/10/06 职场文书
2016秋季田径运动会广播稿
2015/12/21 职场文书