JS加载解析Markdown文档过程详解
网上有很多网站会通过.md文档来做页面内容，很好奇，这是怎么做的？
出于好奇，建了一个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文档。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
vue-cli3项目展示本地Markdown文件的方法
[版本] vue-cli3 webpack@4.33.0 [步骤]1.安装插件vue-markdown-loader npm i vue-markdown-loader -D ps:这个插件是基于markdown-it的,不需要单独安装markdown-it. 2.修改vue.config.js配置文件(如果没有,在项目根目录新建一个): module.exports = { chainWebpack: config => { config.module.rule('md') .test(/\.
-
PyCharm安装Markdown插件的两种方法
Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式. 从github下载的代码一般都会带有README.md文件,该文件是一个Markdown格式的文件.PyCharm是默认没有安装Markdown插件的,所以不能按照Markdown格式显示文本,显示的是原始文本.下面已github库PyWatchlog的代码为例介绍两种安装Markdown的方法. 方法一: 在PyCharm打开PyWatchlog工程后打开README.md文件
-
python使用html2text库实现从HTML转markdown的方法详解
如果PyPi上搜html2text的话,找到的是另外一个库:Alir3z4/html2text.这个库是从aaronsw/html2text fork过来,并在此基础上对功能进行了扩展.因此是直接用pip安装的,因此本文主要来讲讲这个库. 首先,进行安装: pip install html2text 命令行方式使用html2text 安装完后,就可以通过命令html2text进行一系列的操作了. html2text命令使用方式为:html2text [(filename|url) [encodi
-
Django渲染Markdown文章目录的方法示例
对会读书的人来说,读一本书要做的第一件事,就是仔细阅读这本书的目录.阅读目录可以对整体内容有所了解,并清楚地知道感兴趣的部分在哪里,提高阅读质量. 博文也是同样的,好的目录对博主和读者都很有帮助.更进一步的是,还可以在目录中设置锚点,点击标题就立即前往该处,非常的方便. 文中的目录 之前我们已经为博文支持了Markdown语法,现在继续增强其功能. 有折腾代码高亮的痛苦经历之后,设置Markdown的目录扩展就显得特别轻松了. 修改文章详情视图: article/views.py ... # 文
-
CommonMark 使用教程：将 Markdown 语法转成 Html
Markdown写作 从 2016年 开始写博客,我的写作方式一直在改变,准确的说一直在进步,因为效率越来越高. 最初在 CSDN 上写东西时非常蹩脚,在他们编辑器上写点然后调整格式,再写,碰到图片还得将图片插入进去,调整图片大小位置等等,调整完继续写. 效率非常低. 后面了解到 Markdown ,改用 MD 写东西,效率快很多.后面在 Markdown 基础上慢慢优化找到自己的写作方式. 一般我用 MD 语法写完后,得到的是一堆带 MD 符号的文字,以下简称 MD文本. 然后会通过工具转成对
-
Vuejs中使用markdown服务器端渲染的示例
啊哈,又是来推荐一个 vuejs 的 package,miaolz123/vue-markdown. 对应的应用场景是:你想使用一个编辑器或者是在评论系统中支持 markdown.这个 package 的有点还是挺多了,比如默认就支持 emoji,这个就很完美啦!laravist 的新版就使用了 vue-markdown 来渲染评论. 安装 直接使用 npm 来安装: npm install --save vue-markdown 使用 也是很简单的,可以直接这样: import VueMark
-
将Swagger2文档导出为HTML或markdown等格式离线阅读解析
网上有很多<使用swagger2构建API文档>的文章,该文档是一个在线文档,需要使用HTTP访问.但是在我们日常使用swagger接口文档的时候,有的时候需要接口文档离线访问,如将文档导出为html.markdown格式.又或者我们不希望应用系统与swagger接口文档使用同一个服务,而是导出HTML之后单独部署,这样做保证了对接口文档的访问不影响业务系统,也一定程度提高了接口文档的安全性.核心的实现过程就是: 在swagger2接口文档所在的应用内,利用swagger2markup将接口文
-
JS加载解析Markdown文档过程详解
网上有很多网站会通过.md文档来做页面内容,很好奇,这是怎么做的? 出于好奇,建了一个test.md文件: # Hello World! asdfa asd *斜体文本* **粗体文本** ***斜粗体文本*** 分隔线(如下) *** * * * **** - - - ----------- GOOGLE.COM ~~删除线~~ <u>下划线</u> 用浏览器打开之后,结果就被原封不动的输出来了,浏览器根本不会解析这玩意... 跟阮老师的blog相差好大啊~呵呵~还是太天真了!
-
Django restful framework生成API文档过程详解
自动生成api文档(不管是函数视图还是类视图都能显示) 1.安装rest_framework_swagger库 pip install django-rest-swagger 2.在项目下的 urls.py 中加入如下: from rest_framework_swagger.views import get_swagger_view schema_view = get_swagger_view(title='API文档') urlpatterns += [ path(r'docs/', sch
-
Babel自动生成Attribute文档实现详解
目录 1. 前言 2. 开发自动生成属性文档插件 2.1 生成Babel插件模板: 2.2 转换思路详解: 2.3 单元测试用例: 2.4 AST分析详解: 2.5 插件开发过程: 2.5.1 定义Comment.ApiTable类型对象: 2.5.2 插件主逻辑分析: 2.5.3 主逻辑实现: 2.5.4 注释解析函数: 2.5.5 Markdown表格拼装: 2.5.6生成结果展示~ 3. 总结 1. 前言 利用Babel自动解析源码属性上的注释生成对应Markdown文档,这个场景的应用主
-
React 首页加载慢问题性能优化案例详解
学习了一段时间React,想真实的实践一下.于是便把我的个人博客网站进行了重构.花了大概一周多时间,网站倒是重构的比较成功,但是一上线啊,那个访问速度啊,是真心慢,慢到自己都不能忍受,那么小一个网站,没几篇文章,慢成那样,不能接受.我不是一个追求完美的人,但这样可不行.后面大概花了一点时间进行性能的研究.才发现慢是有原因的. React这类框架? 目前主流的前端框架React.Vue.Angular都是采用客户端渲染(服务端渲染暂时不在本文的考虑范围内).这当然极大的减轻了服务器的压力.相对的浏
-
基于vue中css预加载使用sass的配置方式详解
1.安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --save-dev node-sass 2.在build文件夹下的webpack.base.conf.js的rules里面添加配置,如下红色部分 { test: /\.sass$/, loaders: ['style', 'css', 'sass'] } <span style="color:#454545;"
-
C#实现Word和ODT文档相互转换详解
目录 程序环境 方法1 方法2 格式转换 1. Word转为ODT C# vb.net 2. ODT转为Word C# vb.net ODT文档格式一种开放文档格式(OpenDocument Text).通常,ODT格式的文件可以使用LibreOffice Writer.MS Word或其他一些文档编辑器来打开.我们在处理文档时,可通过格式转换的方式,将ODT转为其他格式,或者将其他格式转为ODT,来获取目标文档.本文,以C#及VB.NET代码展示ODT和Word文档之间相互转换的方法. 程序环
-
MySQL5.7.10 安装文档教程详解
1.安装依赖包 yum -y install gcc-c++ ncurses-devel cmake make perl gcc autoconf automake zlib libxml libgcrypt libtool bison 2.安装boost库: 首先先查询是否已经安装过boost rpm -qa boost* 卸载旧boost-*等库: yum -y remove boost-* 下载Boost库,在解压后复制到/usr/local/boost目录下,然后重新cmake并在后面的
-
Java使用路径通配符加载Resource与profiles配置使用详解
序言 Spring提供了一种强大的Ant模式通配符匹配,能从一个路径匹配一批资源. Ant路径通配符 Ant路径通配符支持"?"."*"."**",注意通配符匹配不包括目录分隔符"/": "?":匹配一个字符,如"config?.xml"将匹配"config1.xml": "*":匹配零个或多个字符串,如"cn/*/config.xml&
-
android加载系统相册图片并显示详解
1,下载ImageLoad.jar包放入项目libs文件夹中,并点击右键->add as Library 2,首先记得在Manifest.xml注册权限(注:6.0以后的版本要在代码中动态注册权限) <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.R
-
Tensorflow加载模型实现图像分类识别流程详解
目录 前言 正文 VGG19网络介绍 总结 前言 深度学习框架在市面上有很多.比如Theano.Caffe.CNTK.MXnet .Tensorflow等.今天讲解的就是主角Tensorflow.Tensorflow的前身是Google大脑项目的一个分布式机器学习训练框架,它是一个十分基础且集成度很高的系统,它的目标就是为研究超大型规模的视觉项目,后面延申到各个领域.Tensorflow 在2015年正式开源,开源的一个月内就收获到1w多的starts,这足以说明Tensorflow的优越性以及