常我们都会在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. 九度oj 1006 ZOJ问题 2010年浙江大学计算机及软件工程研究生机试真题

    题目1006:ZOJ问题 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:16244 解决:2742 题目描述: 对给定的字符串(只包含'z','o','j'三种字符),判断他是否能AC.是 ...

  2. 常用Oracle的SQL语句20181206更新

    --clob转字符串:dbms_lob.substr() --锁表:select object_name,machine,s.sid,s.serial# from v$locked_object l, ...

  3. (C++学习)关于CString的一些疑问

    #include <iostream> #include <string> #include <afx.h> #include <vector> usi ...

  4. 流畅的python和cookbook学习笔记(八)

    1.函数的默认参数必须不可变 如果函数的默认参数为可变的对象,那么默认参数在函数外被修改也会影响到函数本身的. >>> def spam(a, b=None): # b要为不可变参数 ...

  5. 流畅的python和cookbook学习笔记(四)

    1.数字的四舍五入 对于简单的舍入运算,使用内置的 round(value, ndigits) 函数即可. round 函数返回离它最近的偶数.也就是说,对 1.5 或者 2.5 的舍入运算都会得到 ...

  6. kafka-php

    kafka-php kafka-php的github地址  https://github.com/jacky5059/kafka-php 生产者produce示例代码 <?php set_inc ...

  7. MVC 控制器中直接访问url 的方式

    public void ShowDetailsImg() { //生成MD5码 string path = @"D:\其他\Test\WebApplication2\WebApplicati ...

  8. 关于纯css写三角形在firefox下的锯齿问题

    相信很多人都用过利用border来实现小三角箭头,百度一下,这类的文章多如牛毛,这里我还是啰嗦点把常用的方法陈列出来: .triangle_border_up{ width:; height:; bo ...

  9. vue-cli脚手架之其他文件解释

    好了,脚手架目录中重要的文件基本都介绍了,但还有一个不太注意到的文件没有解释,这里也说明一下. config文件夹下的index.js,作用是不同开发环境下的参数配置(可选项很多,生产环境.开发环境. ...

  10. nginx: [emerg] bind() to 0.0.0.0:80 failed (98: Address already in use)解决方案

    前提:已经配置好静态IP以防万一,先安装好iptables服务(不管你装没装,先执行,免得后面添乱)[root@localhost ~]# yum install iptables-services[ ...