推荐一个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格式的字符串:

<p>Hello <em>World</em>!</p>

除了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的原创文章,请关注公众号"汪子熙":

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏流星博客

自定义你的U盘图标

在生活中,你的U盘盘符图像是默认的,你会不会看起来感觉不爽呢?接下来就告诉你如何自定义你的盘符!

31610
来自专栏wblearn

简书上实现代码块的几种方式

简书目前还没有插入代码块的选项,对it这一行的我们来说,为了给大家分享技术,代码片呈现的方式或多或少很有必要啦~~,下面,总结一下我知道的几种Markdown模...

1321
来自专栏逸鹏说道

扩充一个Ubuntu的小知识点

补充一个小知识点:Ubuntu的root默认是没有密码的,你切换到root也是需要密码的,这时候不要慌 sudo passwd root 设置一下密码即可 环境...

2938
来自专栏liulun

【JAVA WEB教程】jsp环境搭建(eclipse)【详细+图文】

下载JDK(如果你的系统是64位的,那么就下载64位版本的) ? 然后安装,点击下一步 ? 再点击下一步 安装成功 ? 下载针对JAVA EE的Eclipse...

3296
来自专栏小白课代表

软件分享 | office2013安装教程

5、选择①是一键式安装,默认安装全部且安装在系统盘,选择②为自定义安装,这里点击自定义安装。

1486
来自专栏大前端开发

【新闻】微信小程序开发工具升级到版本 0.10.102700

今晚引来了微信小程序开发工具《微信web开发者工具》的一次更新,此次更新新增了很多API,修复了一些bugs,也标记了一些即将废弃的API。这次更新也升级了开发...

1155
来自专栏wblearn

程序员的你是否熟练掌握Chrome开发者工具?

回归正题,本文主要是介绍一下Chrome developer tool(开发者工具)的使用,以方便我们的日常开发与调试。其实在没用Chrome开发之前就时不时的...

1224
来自专栏极乐技术社区

微信小程序开发详解《三》APP生命周期

1:微信小程序APP的生命周期方法: 在微信小程序工程中的app.js中增加如图所示方法 ? 编译运行,查看日志如图所示:微信小程序启动时,调用生命周期方法为:...

23210
来自专栏芋道源码1024

IntelliJ IDEA 2018.3 首个 Beta 版发布!支持 JVM Profiler 呀

IntelliJ IDEA 秋季的重大更新版本 2018.3 宣布进入 Beta 阶段,并已发布首个 Beta 版本。

862
来自专栏小白课代表

软件分享 | office2010安装教程

4、选择1是一键式安装,默认安装全部且安装在系统盘,选择2为自定义安装,这里点击自定义安装。

1313

扫码关注云+社区

领取腾讯云代金券