前端解析Markdown

1.使用strapdown

1.1、下载

点击下载

1.2.使用

1.2.1、引入CSS文件strapdown.css

<link rel="stylesheet" type="text/css" href="strapdown.css">

1.2.2、HTML结构

<xmp class="html" theme="united" style="display:none;">
...markdown文档代码
</xmp>

theme属性内容是主题代码,具体取值可以查看theme文件夹下的文件

1.2.3、在保证文档加载完成后引入strapdown.js

<script type="text/javascript" src="strapdown.js"></script>

一定要保证html加载完整,否则无效

2.使用marked(配合highlightjs)

2.1、下载

点击下载Marked

2.2、使用

2.2.1、引入JS文件

<script src="jquery.min.js"></script>
<script src="marked.min.js"></script>

2.2.2、HTML结构

无固定结构

2.2.3、执行js

//获取md文件的实际内容
var html = $('xml').html(); //marked解析生成
$('xml').html(marked(html));

3.使用mdjs(配合highlightjs)

3.1、下载

点击下载mdjs

3.2、使用

3.2.1、引入JS文件

<script src="jquery.min.js"></script>
<script src="mdjs.min.js"></script>

3.2.2、HTML结构

无固定结构

3.3.3、执行js

//获取md文件的实际内容
var html = $('xml').html(); //marked解析生成
$('xml').html(Mdjs.md2html(html));
//或者
var mdjs = new Mdjs();
$('xml').html(mdjs.md2html(html));

4.使用HyperDown(配合highlightjs)

4.1、下载

点击下载

4.2、使用

4.2.1、引入JS文件

<script src="jquery.min.js"></script>
<script src="Parser.js.js"></script>

4.2.2、HTML结构

无固定结构

4.3.3、执行js

//获取md文件的实际内容
var html = $('xml').html(); //marked解析生成
var parser = new HyperDown;
$('xml').html(parser.makeHtml(html));

前端解析Markdown的更多相关文章

  1. Java中JSON的简单使用与前端解析

    http://www.blogjava.net/qileilove/archive/2014/06/13/414694.html 一.JSON JSON(JavaScript Object Notat ...

  2. media静态文件统一管理 操作内存的流 - StringIO | BytesIO PIL:python图片操作库 前端解析二进制流图片(了解) Admin自动化数据管理界面

    一.media ''' 1. 将用户上传的所有静态文件统一管理 -- settings.py -- MEDIA_ROOT = os.path.join(BASE_DIR, 'media') 2. 服务 ...

  3. react解析markdown文件

    当当当又get到了一个新技能,使用react-markdown来直接解析markdown文件(咳咳,小菜鸟的自娱自乐) 项目中遇到了一个API的那种展示方式,类似于入门手册啥的那种,如果是一个个调用接 ...

  4. 前端学Markdown

    前面的话   我个人理解,Markdown就是一个富文本编辑器语言,类似于sass对于css的功能,Markdown也可以叫做HTML预处理器,只不过它是一门轻量级的标记语言,可以更简单的实现HTML ...

  5. servlet+ajax+json字符串后台传入,前端解析并把数据循环填入表格实例

    写在前面:1.源代码来源于博客http://blog.sina.com.cn/u/2904067371 ,在此基础上对于前端代码稍作更改,把传过来的数据解析并传入表格2.json解析,用eval()3 ...

  6. 前端解析websocket数据问题

    buf []byte //err = websocket.Message.Send(ws, buf) err = websocket.Message.Send(ws, string(buf[:])) ...

  7. 前端解析cookie出现多余的双引号的问题

    登录界面,用户提交后,后台获取到用户名密码,然后会设置cookie,以便于前端使用,今天在修改项目记住密码的功能的时候,读取cookie,如果存在loginInfo字段说明用户在上一次点击了记住密码的 ...

  8. js 加载并解析Markdown文档

    网上有很多网站会通过.md文档来做页面内容(比如,阮一峰老师的es6入门blog: http://es6.ruanyifeng.com/),很好奇,这是怎么做的?(至于.md是什么,或许(https: ...

  9. Vue 引入 .md 文件,解析markdown语法

    module.exports = { chainWebpack: config => { config.module .rule('md') .test(/\.md$/) .use('html- ...

随机推荐

  1. [LeetCode] Missing Ranges 缺失区间

    Given a sorted integer array where the range of elements are [0, 99] inclusive, return its missing r ...

  2. GET和POST有什么区别?及为什么网上的多数答案都是错的

    如果有人问你,GET和POST,有什么区别?你会如何回答? 最普遍的答案 回来之后寻思了很久,他到底是想问我什么?我一直就觉得GET和POST没有什么除了语义之外的区别,自打我开始学习Web编程开始就 ...

  3. maven pom.xml 说明

    本文复制于:http://blog.csdn.net/zhuxinhua/article/details/5788546 一.pom.xml示例 <project> <modelVe ...

  4. JavaScript 入门教程二 在HTML中使用 JavaScript

    一.使用 <script> 元素的方式有两种:直接在页面中嵌入 JavaScript 代码和引用外部 JavaScript 文件. 二.使用内嵌方式,一般写法为: <script t ...

  5. Codeigniter 3.0 相关文档 part one

    分页配置项 http://stackoverflow.com/questions/18418900/codeigniter-pagination-config-without-repeating-wi ...

  6. leetcode 223

    题目描述: Find the total area covered by two rectilinear rectangles in a 2D plane. Each rectangle is def ...

  7. Cocos2d-x3.x塔防游戏(保卫萝卜)从零开始(二)

    一.前提: 完成前一篇的内容. 具体参考:Cocos2d-x3.x塔防游戏(保卫萝卜)从零开始(一)篇 二.本篇目标: l  说说关于cocos2dx手机分辨率适配 l  对前一篇完成的塔防游戏原型进 ...

  8. spring.xml命名空间

    <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w ...

  9. BLP模型

    编号:1002时间:2016年3月29日16:24:33功能:多级安全BLP模型 URL:http://blog.csdn.net/longronglin/article/details/150033 ...

  10. 290. Word Pattern

    题目: Given a pattern and a string str, find if str follows the same pattern. Here follow means a full ...