常我们都会在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文件的更多相关文章

  1. vue展示md文件,前端读取展示markdown文件

    方案1:每次都需要重新打包,每次修改都需要build 直接使用require + v-html: 核心代码如下: 1. 首先需要添加MD文件的loader就是 markdown-loader npm ...

  2. base64编码后的pdf文件前端页面展示--pdf.js的应用

    最近在整理项目中用到的插件或者使用心得,感觉还是写成博客,能加深新一层的理解. 我先说一下我的需求:由于java后台编译的文件流在手机端加载速度太慢,所以想着可以在前端解析,放在页面展示给用户. 所以 ...

  3. Python Django CMDB项目实战之-2创建APP、建模(models.py)、数据库同步、高级URL、前端页面展示数据库中数据

    基于之前的项目代码来编写 Python Django CMDB项目实战之-1如何开启一个Django-并设置base页index页文章页面 现在我们修改一个文章列表是从数据库中获取数据, 下面我们就需 ...

  4. 前端页面展示MySQL数据并实现前后端互动

    前端页面使用H-ui框架  后端使用flask框架  数据库使用mysql  连接数据库通过pymysql实现 前端代码如下 <html lang="en"> < ...

  5. phpcms前端页面上传文件

    PHPCMS其实有一个叫做附件的模块,上传用的就是这个东西,现在我们来看一下对应的文件:phpcms\modules\attachment \attachments.php就是这个文件,大概在29行上 ...

  6. django--如何将数据结果集序列化传给前端页面展示

    示例为一对多的表关系,学生为多,老师为一,设置外键字段可以为空,也就是说关联的老师被删除该学生依然存在,只是相应字段留空 class Teacher(models.Model): name = mod ...

  7. vue项目中要实现展示markdown文件[转载]

    转载 版权声明:本文为CSDN博主「齐天二圣」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明.原文链接:https://blog.csdn.net/nihaoa5 ...

  8. Python Django CMDB项目实战之-3创建form表单,并在前端页面上展示

    基于之前的项目代码 Python Django CMDB项目实战之-1如何开启一个Django-并设置base页.index页.文章页面 Python Django CMDB项目实战之-2创建APP. ...

  9. 总结:从Node爬取数据到前端图表展示

    最近寒假在家学习Node.js开发,光看书或者跟着敲代码还不够,得找一点有趣的事情来玩一玩,于是我决定写一个Node爬虫,爬取一些有意思或者说是有用的数据.这个决定只与我的兴趣有关,与Python或者 ...

随机推荐

  1. Java的IO输入输出流类的介绍(有图)

    一.字节流 1.InputStream/OutputStream(输入流与输出流几乎一一对应) 读取的方法   int read()   int read(byte[] buffer)   int r ...

  2. <数据挖掘导论>读书笔记1

    数据预处理: 1.聚集:将两个或者多个对象合并成单个对象. 2.抽样:一种选择数据对象子集进行分析的常用方法.抽象方法:简单随机抽样 和渐进抽样 3.维度约:我觉得翻译的不好,英文明细是降维.降维技术 ...

  3. div+css 让一个小div在另一个大div里面 垂直居中

    方法1: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 .parent {           width:800px;           height:500px;       ...

  4. 架构实战项目心得(四):使用Nexus配置Maven私有仓库

    一.安装配置Nexus 1.  下载nexus https://www.sonatype.com/download-oss-sonatype 2.  解压:tar -zxfnexus-3.5.2-01 ...

  5. golang学习之regexp

    regexp是golang标准库自带的正则校验包,使用: re, _ := regexp.Compile(`(\d+)年(\d+)月`) //判断是否匹配category类别搜索 ismatch := ...

  6. HttpClient 入门教程学习

    HttpClient简介 HttpClient是基于HttpCore的HTTP/1.1兼容的HTTP代理实现. 它还为客户端认证,HTTP状态管理和HTTP连接管理提供可重用组件. HttpCompo ...

  7. DataTables固定表格宽度(设置横向滚动条)

    当表格的列比较多的时候,可能就需要固定表格的宽度了,默认的100%宽已经不适应了.默认的100%宽要实现改变窗口大小也100%的话,在table元素上添加width="100%", ...

  8. docker 镜像构建上下文理解

    原文 写得贼好,特别鸣谢,哈哈 如果注意,会看到 docker build 命令最后有一个 . . . 表示当前目录,而 Dockerfile就在当前目录,因此不少初学者以为这个路径是在指定 Dock ...

  9. Redis安装、配置

    一.Redis安装 Linux安装 下载tar包,移至Linux目录下 解压:tar -zxvf redis-4.0.1.tar.gz 安装gcc:yum install gcc-c++(编译失败需安 ...

  10. 将ojdbc 添加到maven

    去oracle官网下载jar包 然后在jar包所在目录输入maven命令 mvn install:install-file -DgroupId=com.oracle -DartifactId=ojdb ...