这个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的原创文章,请关注公众号"汪子熙":
相关推荐
Turndown是由Dominic Christie开发的一个开源项目,其目标是提供一个易于使用的库,能够将HTML文档转换为Markdown格式。这个库基于`html-to-markdown`,并在其基础上进行了优化和扩展,支持更多的HTML元素和属性转换...
Markdown-it-HighlightJS是一个前端开源库,它整合了Markdown解析器markdown-it与代码高亮插件Highlight.js,为开发者提供了在网页上展示格式优美、色彩醒目的代码块的功能。这个库广泛应用于博客、文档网站、论坛等...
JSTransformer是一个强大的前端JavaScript转换库,它允许开发者将不同的源代码格式转换成另一种可处理的格式。在这个特定的案例中,我们关注的是`jstransformer-markdown`,一个专门用于处理Markdown语法的模块。...
Node.js-Raneto是一个优秀的开源解决方案,它致力于为用户提供一个基于Markdown的静态知识库平台。让我们深入了解一下这个强大的工具及其功能。 **一、Raneto概述** Raneto是一个轻量级、易于部署的系统,它利用...
"前端开源库-medium-editor-markdown"是一个专为前端开发者设计的开源项目,旨在提供一个具有Markdown支持的中等编辑器扩展。 首先,我们要理解什么是`Medium Editor`。Medium Editor是一款基于JavaScript的富文本...
Markdown-it-Math是一款专为前端开发者设计的开源库,它扩展了Markdown解析器的功能,使得在Markdown格式的文档中插入数学公式变得轻而易举。这个库尤其适用于那些需要在博客、文档或教程中频繁使用数学表达式的项目...
**标题解析:**"前端开源库-marky-markdown"表明我们关注的是一个名为"marky-markdown"的前端开源库,它的主要功能是处理Markdown语言,可能是用于将Markdown格式的文本解析成HTML。 **描述详解:**"marky-markdown...
例如,`mikeal-markdown-element-aace454`可能是一个开源项目,专注于Markdown元素的渲染。在项目中,开发者可能实现了自定义的Markdown解析器,对默认的HTML元素渲染进行了扩展,如添加额外的CSS样式、支持表格、...
本项目以Rangine(软擎框架)为基础,构建了一款开源的Markdown文档系统,旨在提供一个便捷、高效且易于维护的平台,用于组织和展示各种技术文档或教程。本文将深入探讨该系统的前端部分,结合PHP、MySQL以及源码...
然后在你的JavaScript代码中引入这两个库,并配置Markdown-it解析器以包含Checkbox插件: ```javascript const md = require('markdown-it')(); const markdownItCheckbox = require('markdown-it-checkbox'); md....
在这个项目中,开发者使用Node.js作为主要开发工具,通过HTTP工具模块来抓取掘金小册(一个在线技术分享平台)上的内容,并将抓取到的HTML文件转换成Markdown格式,便于阅读和分享。 Node.js是基于Chrome V8引擎的...
Markdown-it-prism是基于Markdown-it,一个轻量级且高度可扩展的Markdown解析器,通过插件方式将Prism的功能集成进来,使得开发者在生成网页时可以轻松地对代码片段进行格式化和美化。 首先,我们需要了解Markdown-...
“前端开源”表明grunt-markdown是一个开放源代码的项目,这意味着任何开发者都可以查看其源代码,学习其内部工作原理,甚至根据自己的需求进行定制和改进。开源软件通常有活跃的社区支持,用户可以通过提交问题、...
"parcel-plugin-markdown-string"就是一个这样的开源库,专为前端开发者设计,旨在简化和优化开发流程。这个库是一个Parcel插件,Parcel是当前流行的零配置Web应用打包工具,它能够自动处理依赖,让你专注于编写代码...
Remarkjs 是一个基于 JavaScript 的开源库,它允许用户利用 Markdown 语法直接创建动态、响应式的幻灯片,极大地简化了创建专业演示文稿的过程。 ### 1. Remarkjs 基础 - **安装与引入**: 在 HTML 文件中,你可以...
Markdown-it是一个流行的、可扩展的JavaScript库,用于将Markdown语法转换为HTML。它提供了丰富的API和一系列插件,使得开发者可以根据需求自定义Markdown的解析规则。Markdown-it-Expand-Tabs正是利用了这一特性,...
Markdown-it-Include是一款针对前端开发者的开源库,它是Markdown-it解析器的一个插件。Markdown-it是一个流行的、可扩展的Markdown解析器,旨在速度与准确度之间取得平衡,同时支持多种自定义规则。Markdown-it-...
`grunt-jsdoc-to-markdown`是一个非常实用的前端开发工具,主要用于将JavaScript代码中的JSDoc注释转换为Markdown格式的API文档,特别适合那些托管在GitHub上的项目。Markdown格式的文档不仅易于阅读,也方便在...
【前端开源库-doxdox-plugin-markdown】是一款专为前端开发者设计的开源库,它主要功能是增强DoxBox的文档生成能力,通过提供Markdown模板插件来帮助开发者更方便地处理和展示代码注释。DoxBox是一款用于解析...
Markdown-it-Lazy-Headers是前端开发领域的一个开源库,专门针对Markdown解析器Markdown-it设计的一款插件。这个插件的主要功能是实现"懒惰式"的ATX风格标题处理,也就是所谓的"Lazy ATX Headers"。在Markdown语法中...