推荐一个markdown格式转html格式的开源JavaScript库

这个markdown格式转html格式的开源JavaScript库在github上的地址：

https://github.com/millerblack/markdown-js

从markdown 格式转成html源代码格式

新建一个以js结尾的文件，将下列内容粘贴进去：

var markdown = require( "markdown" ).markdown;

console.log( markdown.toHTML( "Hello *World*!" ) );

用nodejs执行，可以看到markdown格式的字符串：

Hello World!

被自动转换成了html格式的字符串:

Hello World!

除了nodejs以外，我们还可以在浏览器里使用这个开源库。

新建一个html，将下列源码粘贴进去：

<!DOCTYPE html>

<html>

<body>

<textarea id="text-input" oninput="this.editor.update()"

rows="6" cols="60">Type **Markdown** here.</textarea>

<div id="preview"> </div>

<script src="../node_modules/markdown/lib/markdown.js"></script>

<script>

function Editor(input, preview) {

this.update = function () {

preview.innerHTML = markdown.toHTML(input.value);

};

input.editor = this;

this.update();

}

var $ = function (id) { return document.getElementById(id); };

new Editor($("text-input"), $("preview"));

</script>

</body>

</html>

用浏览器打开这个html，在顶部输入框里输入markdown代码后，能自动调用这个开源库，转换成html源代码，然后赋给innerHTML, 这样我们在UI上能看到实时的markdown代码转html代码的结果。

要获取更多Jerry的原创文章，请关注公众号"汪子熙":

随机推荐

使用Bootstrap模态框实现增删改查功能
模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 本文实现的是使用模态框实现简单的增删改查的功能. ...
mysql 快捷键
1.ctrl+q 打开查询窗口2.ctrl+/ 注释sql语句3.ctrl+shift +/ 解除注释4.ctrl+r 运行查询窗口的s ...
JAVA基础--JAVA 集合框架（泛型、file类）16
一.集合总结集合:Collection体系.Map体系. Collection体系:单列集合的共性操作规则. List:列表,可以重复,有下标,拥有特有的迭代器ListIterator. Array ...
bzoj 3504: [Cqoi2014]危桥【最大流】
妙啊,很容易想到连(s,a1,an)(s,b1,bn)(a2,t,an)(b2,t,bn),这样,但是可能会发生a1流到b2或者b1流到a2这种不合法情况考虑跑两次,第二次交换b1b2,如果两次都合 ...
洛谷P3306 [SDOI2013]随机数生成器（BSGS）
传送门感觉我BSGS都白学了……数学渣渣好像没有一道数学题能自己想出来…… 要求$X_{i+1}=aX_i+b\ (mod \ \ p)$ 左右同时加上$\frac{b}{a-1}$,把它变成等比数 ...
【MySQL】全量+增量的备份/恢复
生产环境中,有时需要做MySQL的备份和恢复工作.因MySQL是在运行过程中的,做全量备份需要时间,全量备份完成后又有数据变动,此时需要增量备份辅助.如果想恢复数据到一个空库(例如数据迁移或者上云等更 ...
route(2018.10.24)
建出最短路图之后$topsort$即可. 具体思路: 先用$dijkstra$算法在原图中跑出$1$号点到$i$号节点的最短距离$dist_1(i)$,将所有边反向后用\(dijk ...
hdu 2108 Shape of HDU（判定是不是凸多边形）
#include <iostream> #include <algorithm> #include <cstring> #include <cstdio> ...
推荐 VS2010入门教程—鸡啄米
http://www.jizhuomi.com/catalog.asp?tags=VS2010 推荐 VS2010入门教程—鸡啄米,真的非常使用和经典!
SpringBoot | 遇坑总结 | JPA
1. Caused by: org.hibernate.HibernateException: Access to DialectResolutionInfo cannot be null when ...

推荐一个markdown格式转html格式的开源JavaScript库

推荐一个markdown格式转html格式的开源JavaScript库的更多相关文章

随机推荐

热门专题