Markdown.js 基于 JavaScript 的 Markdown 语法解析器

发布于 2019-09-15 12:03:12 字数 3464 浏览 3261 评论 0

Markdown.js 是一个基于 JavaScript 的 Markdown 语法解析器,有几个选项,在这个项目,但都把 Markdown 到 HTML 的转换为一个单一的步骤。你通过 Markdown 和获取 HTML 故事结束。我们有一些非常特别的意见,关于如何实际的过程,其中包括:

  • 产生良好的 HTML。这意味着他们和强大的嵌套是重要的,为的是能够输出为HTML和XHTML
  • 要允许解析数据处理的中间表示(我们其实有两个,两 JsonML:降价树和HTML树)
  • 不必重写整个分析机制,很容易扩展到添加新方言
  • 有一个很好的测试套件。我们能找到的唯一的测试套件的测试大块的输入,并通过依靠完全相同的空白的原始实现输出HTML

安装

仅仅需要 markdown 库只需要运行下面的代码

npm install markdown

可选,安装 md2html 在对你的项目中

npm install -g markdown

如果你想在浏览器中使用,你可以通过 GitHub地址 下载得到Markdown-js的源文件,然后引入到你的项目中。

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

使用方法

基本使用

md_content = "Hello.\n\n* This is markdown.\n* It is fun\n* Love it or leave it."
html_content = markdown.toHTML( md_content );

支持特别的其它的语法

md_content = "Vessel     | Captain\n-----------|-------------\nNCC-1701   | James T Kirk\nNCC-1701 A | James T Kirk\nNCC-1701 D | Picard";
html_content = markdown.toHTML( md_content, 'Maruku');

在 Node 中使用

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

我们只正式支持 Node.js > 0.10 作为我们使用的库,用于构建和测试不适用于旧版本的节点。这是因为这个模块是如此简单,没有使用任何部分的节点的接口,如果你使用前内置的版本,并找到一个错误,让我们知道,我们会尝试和修复它。

在浏览器中使用

它还适用于浏览器,这里是一个完整的例子:

<!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="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>

在命令行中运行

假设你已经安装了md2html脚本(见安装,以上),你可以将Markdown到HTML:

# read from a file
md2html /path/to/doc.md > /path/to/doc.html

# or from stdin
echo 'Hello *World*!' | md2html

可选选项

如果你想要更多的控制检查文档.js文件在src/所有细节的方法和参数(包括例子!)有一天我们会得到文档生成和主持的地方更好的浏览。

同时,这里采用多步处理使维基式连接的工作填补缺失的环节,引用一个例子:

var md = require( "markdown" ).markdown,
    text = "[Markdown] is a simple text-based [markup language]\n" +
           "created by [John Gruber]\n\n" +
           "[John Gruber]: http://daringfireball.net";

// parse the markdown into a tree and grab the link references
var tree = md.parse( text ),
    refs = tree[ 1 ].references;

// iterate through the tree finding link references
( function find_link_refs( jsonml ) {
  if ( jsonml[ 0 ] === "link_ref" ) {
    var ref = jsonml[ 1 ].ref;

    // if there's no reference, define a wiki link
    if ( !refs[ ref ] ) {
      refs[ ref ] = {
        href: "http://en.wikipedia.org/wiki/" + ref.replace(/\s+/, "_" )
      };
    }
  }
  else if ( Array.isArray( jsonml[ 1 ] ) ) {
    jsonml[ 1 ].forEach( find_link_refs );
  }
  else if ( Array.isArray( jsonml[ 2 ] ) ) {
    jsonml[ 2 ].forEach( find_link_refs );
  }
} )( tree );

// convert the tree into html
var html = md.renderJsonML( md.toHTMLTree( tree ) );
console.log( html );

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84961 人气
更多

推荐作者

娇女薄笑

文章 0 评论 0

biaggi

文章 0 评论 0

xiaolangfanhua

文章 0 评论 0

rivulet

文章 0 评论 0

我三岁

文章 0 评论 0

薆情海

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文