将Markdown/Textile转换为HTML(以及理想情况下,返回Markdown/Textile)的Javascript

Question

Markdown/Textile 有几个很好的Javascript 编辑器(例如:http://attacklab.net/showdown/,我现在正在使用的那个),但我只需要一个Javascript函数来转换来自Markdown/Textile的字符串 - > HTML和返回.

最好的方法是什么？(理想情况下,它将是jQuery友好的 - 例如,$("#editor").markdown_to_html())

编辑:另一种方式是我正在寻找Rails textilize()和markdown()文本助手的Javascript实现

Answer 1

对于Markdown - > HTML,有Showdown

StackOverflow本身使用Markdown语言来提问和回答; 你试着看看它是如何工作的吗？

好吧,似乎它正在使用在MIT许可下可用的PageDown

问题是否有任何好的Markdown Javascript库或控件？它的答案也可能有所帮助:-)

当然,完整的编辑并不完全是你所要求的; 但是他们必须使用某种函数将Markdown代码转换为HTML; 并且,根据这些编辑的许可,您可以重新使用该功能......

实际上,如果你仔细看看Showdown,在它的代码源(文件showdown.js)中,你会发现这部分评论:

//
// Showdown usage:
//
//   var text = "Markdown *rocks*.";
//
//   var converter = new Showdown.converter();
//   var html = converter.makeHtml(text);
//
//   alert(html);
//
// Note: move the sample code to the bottom of this
// file before uncommenting it.
//

它不是jQuery语法,但应该很容易集成到您的应用程序中;-)

关于纺织,似乎有点难找到有用的东西:-(

在另一方面,HTML - > Markdown,我想事情可能会有点困难......

我要做的是将Markdown和HTML存储在我的应用程序数据存储(数据库？)中,并使用一个进行编辑,另一个用于渲染...将占用更多空间,但似乎风险低于"解密"HTML. ..

Answer 2

纺织品

你可以找到一个看似很细的Javascript实现纺织这里,另一个存在(也许不那么好,但有一个很好的转换,为你型示例页面).

注意:第一个实现中有一个错误我链接到:水平条未正确呈现.要解决此问题,您可以在文件中添加以下代码.

for(i=0;i<lines.length;i++) {
    // Add code :Start
    if (lines[i].match(/\s*-{4,}\s*/)){
      html+="<hr/>\n";
      continue;
    }
    // Add code :End
    if (lines[i].indexOf("[") == 0) {continue;}
    //...

Answer 3

我认为在这里列出JavaScript解决方案以及它们的缩小(未压缩)大小和优点/缺点是值得的.缩小代码的压缩大小约为未压缩大小的50%.什么它归结为是我推荐下页(8KB)如果你需要全面的支持,因为用户将在您的网站上编辑文档,我建议我自己的提款(1.3kb的),如果你在一个web应用程序呈现的信息是没有用户编辑; 对于绝大多数情况来说,这是非常小的事情.我相信几乎所有这些都是麻省理工学院的许可证.

npm还有各种各样的脚本用于此目的,具有不同的质量状态.

• 摊牌:28KB.基本上是黄金标准; 它是减记的基础.

• pagedown:8KB.这就是StackExchange的强大功能,因此您可以自己查看它支持的功能.它非常全面且非常强大.除了8KB转换器脚本之外,它还提供编辑器和清理程序脚本,StackExchange也使用这两种脚本.

• 降价 - 它:104KB.遵循CommonMark规范; 支持语法扩展.快速; 实际上可能像摊牌一样强大,但非常大.是http://dillinger.io/的基础.

• 标记:19KB.全面; 测试单元测试套件; 支持自定义词法分析器规则.

• micromarkdown:5KB.支持许多功能,但缺少一些常见的功能,如无序列表使用*和一些常见的功能,这些不是严格的规范的一部分,如受防护的代码块.许多错误,在大多数较长的文档上抛出异常.我认为这是实验性的.

• 纳米降价:1.9KB.功能范围仅限于大多数文档使用的内容; 比micromarkdown更强大但不完美; 使用自己非常基本的单元测试.相当强大,但在许多边缘情况下打破.

• 缩编:1.3KB.完全披露,我写了.更广泛的功能范围,比纳米降价更强大; 处理大多数但不是全部的CommonMark规范.不正确地处理一些边缘情况; 不推荐用于用户编辑的文档,但对于在Web应用程序中显示信息非常有用.没有内联HTML.

• mmd.js:800字节.努力使尽可能小的解析器仍然起作用的结果.支持一个小子集; 文件需要为其量身定制.

• markdown-js:54KB(不可下载缩小;可能缩小到~20KB).看起来非常全面,包括测试,但我不是很熟悉它.

• 熔毁:41KB(不可下载缩小;可能缩小到~15KB).jQuery插件; Markdown Extra(表格,定义列表,脚注).

Answer 4

我正在使用微小的简约脚本--mmd.js,它只支持Markdown可能性的一个子集,但这可能是所有人都需要的,所以这个小于1kb的脚本是惊人的,并不会是一种矫枉过正.

支持的功能

• 头 #
• 引用文字 >
• 有序列表 1
• 无序列表 *
• 段落
• 链接 []()
• 图片 ![]()
• 内联重点 *
• 内联重点 **

不支持的功能

• 参考和ID
• 逃离Markdown角色
• 嵌套

Answer 5

我发现这个问题很有趣，所以我决定开始做一些事情（仅替换strong和italic降价标签）。在花了一个小时尝试使用正则表达式设计解决方案后，我放弃了并最终得到了以下结果，这似乎工作得很好。也就是说，它肯定可以进一步优化，我不确定这种形式的现实世界弹性如何：

function mdToHtml(str) {
    var tempStr = str;
    while(tempStr.indexOf("**") !== -1) {
        var firstPos = tempStr.indexOf("**");
        var nextPos = tempStr.indexOf("**",firstPos + 2);
        if(nextPos !== -1) {
            var innerTxt = tempStr.substring(firstPos + 2,nextPos);
            var strongified = '<strong>' + innerTxt + '</strong>';
            tempStr = tempStr.substring(0,firstPos) + strongified + tempStr.substring(nextPos + 2,tempStr.length);
        //get rid of unclosed '**'
        } else {
            tempStr = tempStr.replace('**','');
        }
    }
     while(tempStr.indexOf("*") !== -1) {
        var firstPos = tempStr.indexOf("*");
        var nextPos = tempStr.indexOf("*",firstPos + 1);
        if(nextPos !== -1) {
            var innerTxt = tempStr.substring(firstPos + 1,nextPos);
            var italicized = '<i>' + innerTxt + '</i>';
            tempStr = tempStr.substring(0,firstPos) + italicized + tempStr.substring(nextPos + 2,tempStr.length);
        //get rid of unclosed '*'
        } else {
            tempStr = tempStr.replace('*','');
        }
    }
    return tempStr;
}

测试代码：

    var s = "This would be *italicized* text and this would be **bold** text, This would be *italicized* text and this would be **bold** text, This would be *italicized* text and this would be **bold** text";
    alert(mdToHtml(s));

输出：

This would be <i>italicized</i>text and this would be <strong>bold</strong> text, This would be <i>italicized</i>text and this would be <strong>bold</strong> text, This would be <i>italicized</i>text and this would be <strong>bold</strong> text

编辑：V 0.024 中的新增功能 - 自动删除未关闭的 Markdown 标签

Answer 6

不管有没有 jQuery，它\xe2\x80\x99s 都很容易使用 Showdown 。Here\xe2\x80\x99s 是一个 jQuery 示例：

\n\n

// See http://mathiasbynens.be/notes/showdown-javascript-jquery for a plain JavaScript version as well\n$(function() {\n // When using more than one `textarea` on your page, change the following line to match the one you\xe2\x80\x99re after\n var $textarea = $(\'textarea\'),\n     $preview = $(\'<div id="preview" />\').insertAfter($textarea),\n     converter = new Showdown.converter();\n $textarea.keyup(function() {\n  $preview.html(converter.makeHtml($textarea.val()));\n }).trigger(\'keyup\');\n});\n

\n

Answer 7

Showdown Attacklab-Link 已关闭，因此请使用https://github.com/coreyti/showdown来满足您的转换需求:)