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 相关文章推荐
JavaScript基本编码模式小结
May 23 Javascript
js文本框输入点回车触发确定兼容IE、FF等
Nov 19 Javascript
jquery分页对象使用示例
Apr 01 Javascript
纯javascript实现自动发送邮件
Oct 21 Javascript
JSON对象 详解及实例代码
Oct 18 Javascript
JavaScript获取短信验证码(周期性)
Dec 29 Javascript
JS鼠标滚动分页效果示例
Jul 05 Javascript
JS中Swiper的使用和轮播图效果
Aug 11 Javascript
使用命令行工具npm新创建一个vue项目的方法
Dec 27 Javascript
vue 利用路由守卫判断是否登录的方法
Sep 29 Javascript
JavaScript继承的特性与实践应用深入详解
Dec 30 Javascript
在vant中使用时间选择器和popup弹出层的操作
Nov 04 Javascript
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
海贼王动画变成“真人”后,凯多神还原,雷利太帅了!
2020/04/09 日漫
PHP字符串中特殊符号的过滤方法介绍
2014/02/18 PHP
php中 $$str 中 &quot;$$&quot; 的详解
2015/07/06 PHP
laravel5.1框架基础之Blade模板继承简单使用方法分析
2019/09/05 PHP
php实现断点续传大文件示例代码
2020/06/19 PHP
一段实时更新的时间代码
2006/07/07 Javascript
Javascript之this关键字深入解析
2013/11/12 Javascript
jquery弹出层类代码分享
2013/12/27 Javascript
jQuery实现倒计时按钮功能代码分享
2014/09/03 Javascript
jQuery选择器源码解读(七):elementMatcher函数
2015/03/31 Javascript
JS返回iframe中frameBorder属性值的方法
2015/04/01 Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
2015/12/01 Javascript
jQuery ajaxForm()的应用
2016/10/14 Javascript
jQuery表单插件ajaxForm实例详解
2017/01/17 Javascript
vue组件watch属性实例讲解
2017/11/07 Javascript
解决vue.js this.$router.push无效的问题
2018/09/03 Javascript
node.js之基础加密算法模块crypto详解
2018/09/11 Javascript
Vant picker 多级联动操作
2020/11/02 Javascript
vue添加自定义右键菜单的完整实例
2020/12/08 Vue.js
[03:56]DOTA2完美大师赛趣味视频之小鸽子和Mineski打台球
2017/11/24 DOTA
python中list常用操作实例详解
2015/06/03 Python
Windows中使用wxPython和py2exe开发Python的GUI程序的实例教程
2016/07/11 Python
详解Python 函数如何重载?
2019/04/23 Python
pandas数据筛选和csv操作的实现方法
2019/07/02 Python
深入浅析Python 中的sklearn模型选择
2019/10/12 Python
Python 批量读取文件中指定字符的实现
2020/03/06 Python
CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
2016/03/16 HTML / CSS
迷你唐卡软皮鞋:Minnetonka Moccasin
2018/05/01 全球购物
《蒙娜丽莎之约》教学反思
2014/02/27 职场文书
医院标语大全
2014/06/23 职场文书
2016年母亲节寄语
2015/12/04 职场文书
转变工作作风心得体会
2016/01/23 职场文书
mysql外连接与内连接查询的不同之处
2021/06/03 MySQL
SpringBoot集成Redis,并自定义对象序列化操作
2021/06/22 Java/Android
SpringBoot+VUE实现数据表格的实战
2021/08/02 Java/Android
MySQL如何快速创建800w条测试数据表
2022/03/17 MySQL