使用JavaScript将Markdown / Textile转换为HTML（最好是Markdown / Textile）

Markdown / Textile有几个很好的Javascript 编辑器 （例如： http : //attacklab.net/showdown/ ，我现在正在使用的那个），但是我需要的是一个JavaScript函数，可以将Markdown / Textile – > HTML和返回。

什么是最好的方法来做到这一点？ （理想情况下，这将是jQuery友好的 – 例如， $("#editor").markdown_to_html() ）

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

对于Markdown – > HTML，有摊牌

StackOverflow本身使用Markdown语言来提出问题和答案; 你试图看看它是如何工作的？

那么，它似乎是使用MIT授权下的PageDown

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

一个完整的编辑当然不是你所要求的; 但他们必须使用某种function将Markdown代码转换为HTML; 并根据这些编辑的许可证，您可能可以重新使用该function…

实际上，如果仔细观察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语法，但应该很容易集成到您的应用程序;-)

关于纺织，似乎有点难find有用的东西:-(

另一方面，HTML – > Markdown，我想事情可能会有点难…

我要做的是将Markdown和HTML存储在我的应用程序数据存储（数据库？）中，并使用一个进行编辑，另一个用于渲染…将需要更多的空间，但似乎比“解密”HTML风险更小。 ..

纺织品

你可以在这里find一个貌似非常好的Javascript的Javascript实现，另一个（也许不是很好，但是有一个很好的convert-as-you-type示例页面）。

注意：在第一个实现中有一个错误，我做了一个链接：横条不能正确渲染。 要修复它，你可以在文件中添加下面的代码。 

 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;} //...

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

支持的function

  • 标题#
  • 块引用>
  • 有序清单1
  • 无序列表*
  • 段落
  • 链接[]()
  • 图片![]()
  • 内联重点*
  • 内联重点**

不支持的function

  • 参考和ID
  • 转义Markdown字符
  • 嵌套

使用或不使用jQuery的Showdown很容易。 这是一个jQuery的例子： 

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

摊牌Attacklab链接closures，所以使用https://github.com/coreyti/showdown为您的转换需要;:)

这不涉及整个请求（它不是一个编辑器），但纺织品是一个JavaScript渲染库： https ： //github.com/borgar/textile-js 。 演示可在http://borgar.github.io/textile-js/

我认为在这里列出JavaScript解决scheme的列表以及它们的缩小（未压缩）大小和优缺点是值得的。 缩小代码的压缩大小约为未压缩大小的50％。 如果你需要全面的支持，因为用户将会在你的网站上编辑文档，我推荐使用pagedown （8KB），如果你正在一个web应用程序中呈现信息，我build议自己下拉（1.3KB）没有用户编辑; 绝大多数情况下是正确的事情，而非常小。 我相信几乎所有这些都是MIT许可证。

npm也有各种各样的脚本用于这个目的，在不同的质量状态。

  • 摊牌 ：28KB。 基本上是黄金标准; 这是pagedown的基础。

  • pagedown ：8KB。 这是StackExchange的function，所以你可以看到自己支持哪些function。 这是相当全面的，非常强大。 除了8KB转换器脚本之外，它还提供了编辑器和清理器脚本，StackExchange也使用这两个脚本。

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

  • 标记 ：19KB。 全面; testingunit testing套件; 支持自定义词法分析器规则。

  • 微标记 ：5KB。 支持很多function，但是缺less一些常见的function，比如使用*无序列表，以及一些常见的function，比如隔离代码块。 许多错误，在大多数更长的文档上抛出exception。 我认为它是实验性的。

  • 纳米降价 ：1.9KB。 特征范围限于大多数文档使用的东西; 比micromarkdown更强大但不完美; 使用自己的非常基本的unit testing。 合理的强大，但在许多边缘情况下打破。

  • 缩小 ：1.3KB。 完全披露，我写了。 更小的function范围和更强大的纳米降价function; 处理大部分但不是全部的CommonMark规范。 处理一些边缘案例不正确; 不build议用户编辑的文档，但在Web应用程序中呈现信息非常有用。 没有内联的HTML。

  • mmd.js ：800个字节。 努力使尽可能小的parsing器仍然有效的结果。 支持一小部分; 文件需要量身定做。

  • markdown-js ：54KB（不可下载缩小;可能缩小到〜20KB）。 看起来相当全面，包括testing，但我不是很熟悉它。

  • 崩溃 ：41KB（不能下载缩小;可能会缩小到〜15KB）。 jQuery插件; Markdown Extra（表格，定义列表，脚注）。

我发现这个问题很有趣，所以我决定开始一些事情（只取代strong和italic降价标签）。 花了一个小时试图用正则expression式来devise一个解决scheme，我放弃了，并最终以下，这似乎很好地工作。 也就是说，它肯定会得到进一步的优化，我不确定这种forms的真实世界将如何恢复： 

 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; }

testing代码： 

  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新 – 自动删除未closures降价标签

markdown-js是一个不错的JavaScript markdownparsing器，是一个具有testing的活动项目。

你看过Mylyn的Eclipse WikiText库吗？ 它将从许多wiki语法转换为xhtml和xdocs / DITA。 它看起来很酷。

http://help.eclipse.org/galileo/topic/org.eclipse.mylyn.wikitext.help.ui/help/Markup-Conversion.html

有没有人find了HTML->纺织品问题的解决scheme？ 我们目前的所有文档都是M $ WORD格式，我们很乐意将它带入Redmine Wiki进行协作式维护。 我们还没有find任何工具来进行转换。 我们find了产生mediawiki格式文本的Open Office扩展，但是Redmine Wiki使用了一个纺织的子集。

任何人都知道从Mediawiki，Word，XDocs或HTML转换TO纺织品的工具？

对于纺织品：

我最近一起修补HTML到纺织品转换器： https ： //github.com/cmroanirgo/to-textile

对于HTML的反向纺织，我使用和推荐https://github.com/borgar/textile-js ，其他答案已经提到。

Interesting Posts