在前端页面展示Markdown文件
常我们都会在GitHub上浏览很多的readme文件,这些都是Markdown语法写成的Markdown文件,HTML中并没有用于展示Markdown文件的元素,那么为什么可以在前端展示呢?
有别于GitHub官方给提供的API(有访问频率限制),我使用了一个npm 模块。这个模块可以非常方便的将Markdown语法的字符串直接转化为HTML 代码字符串。然后我们让某个div
元素的innerHTML属性为这个字符串即可显示。
这个npm模块叫做showdown,它的源码可以在GitHub找到:源码,GitHub可以一并找到使用教程。
这里把使用方法简单介绍一下:
1.安装
npm install showdown
2.引入
ES6 import:
import showdown from ‘showdown’;
3.初始化转换器:
let converter = new showdown.Converter();
4.将markdown语法的字符串转换为HTML字符串:
//html变量是HTML代码字符串
//text是Markdown语法的字符串
let html = converter.makeHtml(text);
5.在前端页面显示:
document.getElementById('id').innerHTML = html;
如果对显示样式不满意,可以通过CSS自定义,非常方便。
另外,如果获取后端的.md文件作为字符串呢?
答案是直接通过ajax的get方法请求.md 文件,获取到的就是Markdown字符串了。
具体实例:
renderMD(param){
let path = Params[0].file;
if(param !== null && param !== undefined && param !== ' '){
path = Params[param].file;
}
let tmp = Ajax({
url:path,
headers:{
'content-type':'text/plain'
},
method:'get'
});
tmp.then(res => {
// console.log(res);
let Convertor = new showdown.Converter();
let html = Convertor.makeHtml(res);
document.getElementsByClassName('DetailDisplay')[0].innerHTML = html;
});
}
在前端页面展示Markdown文件的更多相关文章
- vue展示md文件,前端读取展示markdown文件
方案1:每次都需要重新打包,每次修改都需要build 直接使用require + v-html: 核心代码如下: 1. 首先需要添加MD文件的loader就是 markdown-loader npm ...
- base64编码后的pdf文件前端页面展示--pdf.js的应用
最近在整理项目中用到的插件或者使用心得,感觉还是写成博客,能加深新一层的理解. 我先说一下我的需求:由于java后台编译的文件流在手机端加载速度太慢,所以想着可以在前端解析,放在页面展示给用户. 所以 ...
- Python Django CMDB项目实战之-2创建APP、建模(models.py)、数据库同步、高级URL、前端页面展示数据库中数据
基于之前的项目代码来编写 Python Django CMDB项目实战之-1如何开启一个Django-并设置base页index页文章页面 现在我们修改一个文章列表是从数据库中获取数据, 下面我们就需 ...
- 前端页面展示MySQL数据并实现前后端互动
前端页面使用H-ui框架 后端使用flask框架 数据库使用mysql 连接数据库通过pymysql实现 前端代码如下 <html lang="en"> < ...
- phpcms前端页面上传文件
PHPCMS其实有一个叫做附件的模块,上传用的就是这个东西,现在我们来看一下对应的文件:phpcms\modules\attachment \attachments.php就是这个文件,大概在29行上 ...
- django--如何将数据结果集序列化传给前端页面展示
示例为一对多的表关系,学生为多,老师为一,设置外键字段可以为空,也就是说关联的老师被删除该学生依然存在,只是相应字段留空 class Teacher(models.Model): name = mod ...
- vue项目中要实现展示markdown文件[转载]
转载 版权声明:本文为CSDN博主「齐天二圣」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明.原文链接:https://blog.csdn.net/nihaoa5 ...
- Python Django CMDB项目实战之-3创建form表单,并在前端页面上展示
基于之前的项目代码 Python Django CMDB项目实战之-1如何开启一个Django-并设置base页.index页.文章页面 Python Django CMDB项目实战之-2创建APP. ...
- 总结:从Node爬取数据到前端图表展示
最近寒假在家学习Node.js开发,光看书或者跟着敲代码还不够,得找一点有趣的事情来玩一玩,于是我决定写一个Node爬虫,爬取一些有意思或者说是有用的数据.这个决定只与我的兴趣有关,与Python或者 ...
随机推荐
- SpringMVC Controller层的单元测试
Getting Ready 测试相关Maven dependency如下: <dependency> <groupId>org.springframework</grou ...
- 启停无线网卡bat脚本
@echo off color 2 title 启停无线网卡 echo 启动无线网卡=======>按1键 echo 关闭无线网卡=======>按2键 set /p n= if /i & ...
- .NET 中使用阿里云短信的 API 接口
小弟初来乍到,这也是我的第一篇文章,写的不好的地方还望指正.谢谢各位! 引言 短信服务(Short Message Service)是阿里云为用户提供的一种通信服务的能力,支持快速发送短信验证码.短信 ...
- Expression Blend实例中文教程(1) - 开篇
随着计算机软件开发分工细节化,微软对已有的产品线进行了调整,在保持原有经典开发工具Visual Studio基础上,又推出了一套新的设计开发工具系列,Expression Studio. Expres ...
- 001.開始使用ASP.NET Web API 2(一)
原文鏈接:http://www.asp.net/web-api/overview/getting-started-with-aspnet-web-api/tutorial-your-first-web ...
- Springboot简单整合Rabbit
两个项目.分别是生产者和消费者项目 .首先引入依赖.两边pom都一样 第一次练习,启动生产者后,再启动消费者,一直报找不到 队列的声明. 后排查发现是 需要现在生产者这边浏览器访问一次生产消息的方法 ...
- 中南oj 1213: 二叉树结点公共祖先
1213: 二叉树结点公共祖先 Time Limit: 1 Sec Memory Limit: 128 MB Submit: 159 Solved: 87 [Submit][Status][Web ...
- Thrift笔记(七)--回调源码分析
网上找了写代码,东拼西凑写了个demo.开始server用的是阻塞io,不行,换成非阻塞的io就可以.这里可能需要注意下 thrift文件 namespace java com.gxf.thrift ...
- css-flex布局知识梳理
一.传统的布局 布局的传统解决方案,基于盒装模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. 二. Flex的 ...
- HTML5特效~3D立方体旋转
先欣赏一下该特效的最终效果 本文源码参考自http://www.cnblogs.com/ECJTUACM-873284962/进行一点点优化,下面是对此特效原理上的的剖析. 该特效是基于Css3的一些 ...