90

Markdown / Textile有几个很好的 Javascript编辑器（例如：http ://attacklab.net/showdown/ ，我现在正在使用的那个），但我需要的是一个 Javascript 函数，它可以从 Markdown / Textile 转换字符串-> HTML 并返回。

最好的方法是什么？（理想情况下它应该是 jQuery 友好的——例如，$("#editor").markdown_to_html()）

编辑：另一种说法是，我正在寻找 Railstextilize()和markdown()文本助手的 Javascript 实现

4

12 回答 12

106

对于 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 语法，但应该很容易集成到您的应用程序中；-)


关于 Textile，似乎很难找到任何有用的东西:-(


另一方面，HTML -> Markdown，我想事情可能会更难一些......

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

于 2009-08-23T22:16:09.420 回答
38

我认为值得在这里列出 JavaScript 解决方案及其缩小（未压缩）的大小和优势/劣势。压缩代码的压缩大小约为未压缩大小的 50%。它归结为：

  • 如果您需要全面的支持并且将有用户编辑或任意文档，但不太关心大小/带宽，请使用markdown-it (104KB)。
  • 如果您需要相当高的质量和桌面支持，但需要轻量级并且不需要除转换以外的任何功能，或者解决每个边缘情况，请使用我自己的缩编(1.3KB)。
  • 如果您需要安全性或可扩展性等独特功能，请使用其他功能之一。

所有这些都使用 MIT 许可证，大多数都在 npm 上。

  • 降价它：104KB。自CommonMark迁移以来为 StackExchange 提供支持。遵循 CommonMark 规范，现在或多或少是黄金标准；支持语法扩展；默认情况下产生安全输出。快速地; 像摊牌一样强大，但非常大。有很多功能（例如同步滚动）。也是http://dillinger.io/的基础。

  • 摊牌：28KB。拥有全面的 CommonMark 支持，以前是黄金标准；明显小于 Markdown-It，但速度较慢。它是pagedown的基础。

  • 分页：8KB。在CommonMark迁移之前为 StackExchange提供支持。它非常健壮，但缺少表格、定义列表、脚注等。除了 8KB 转换器脚本，它还提供编辑器和清理脚本。

  • 回撤： 1.3KB。完全公开，我写的。比任何其他轻量级转换器更广泛的功能范围；处理大部分但不是全部的 CommonMark 规范。不推荐用于用户编辑，但对于在 Web 应用程序中呈现信息非常有用。没有内联 HTML。

  • 标记：19KB。综合的; 针对单元测试套件进行测试；支持自定义词法分析器规则。

  • 微降价：5KB。支持很多功能，但缺少一些常见的功能，例如使用无序列表*和一些不严格属于规范的常见功能，例如防护代码块。许多错误，在大多数较长的文档上引发异常。我认为它是实验性的。

  • 纳米降价：1.9KB。功能范围仅限于大多数文档使用的东西；比 micromarkdown 更健壮但并不完美；使用它自己的非常基本的单元测试。相当健壮，但在许多边缘情况下都会中断。

  • mmd.js：800 字节。努力使最小的解析器仍然可用的结果。支持一个小子集；文档需要为其量身定制。

  • markdown-js：54KB（缩小后不可下载；可能会缩小到 ~20KB）。看起来很全面，包括测试，但我不是很熟悉。

  • 熔毁：41KB（缩小后不可下载；可能会缩小到~15KB）。jQuery插件；Markdown Extra（表格、定义列表、脚注）。

  • unity.js：变化，5-100KB。一个基于插件的系统，用于在 html、markdown 和散文之间进行转换。根据您需要的插件（拼写检查、语法高亮、输入清理），文件大小会有所不同。可能使用更多的服务器端而不是客户端。

于 2016-10-16T02:40:24.560 回答
14

纺织品

您可以在此处找到一个看似非常出色的 Textile 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;}
    //...
于 2010-01-18T18:45:24.093 回答
11

我正在使用极简脚本 - mmd.js，它只支持 Markdown 可能性的一个子集，但这可能就是人们所需要的全部，所以这个小于 1kb 的脚本非常棒，而且不会过分。

支持的功能

  • 标头#
  • 块引用>
  • 有序列表1
  • 无序列表*
  • 段落
  • 链接[]()
  • 图片![]()
  • 内联强调*
  • 内联强调**

不支持的功能

  • 参考文献和 ID
  • Markdown 字符的转义
  • 嵌套
于 2014-06-05T14:13:02.530 回答
5

无论有没有 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');
});
于 2010-05-02T18:13:19.177 回答
4

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

于 2011-04-24T09:19:06.533 回答
3

这并不能解决整个请求（它不是编辑器），但 Textile-js 是一个 javascript 渲染库：https ://github.com/borgar/textile-js 。演示可在http://borgar.github.io/textile-js/

于 2014-01-31T19:34:09.930 回答
2

我发现这个问题很有趣，所以我决定开始做一些事情（仅替换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 中的新功能 - 自动删除未关闭的降价标签

于 2009-08-23T23:29:32.457 回答
1

markdown-js是一个不错的 javascript markdown 解析器，一个带有测试的活跃项目。

于 2011-09-19T06:04:08.997 回答
1

让我们编写一个简单的 markdown 解析器函数，它将接收一行 markdown 并被翻译成适当的 HTML。为了简单起见，我们在语法上只支持 Markdown 的一项功能：标题。

标头由 (1-6) 哈希指定，后跟一个空格，然后是文本。散列的数量决定了 HTML 输出的标题级别。

function markdownParser(markdown) {
  const htmlText = markdown
    .replace(/^# (.*$)/gim, '<h1>$1</h1>')
    .replace(/^## (.*$)/gim, '<h2>$1</h2>')
    .replace(/^### (.*$)/gim, '<h3>$1</h3>')
    .replace(/^#### (.*$)/gim, '<h4>$1</h4>')
    .replace(/^##### (.*$)/gim, '<h5>$1</h5>')
    .replace(/^###### (.*$)/gim, '<h6>$1</h6>')
 return htmlText.trim() 
}
于 2021-06-19T13:09:12.817 回答
0

Have you looked at the Eclipse WikiText library that is part of Mylyn. It will convert from many wiki syntax to xhtml and to xdocs/DITA. It looks way cool.

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

Has anyone found a solution to the HTML->textile problem? All of our current documentation is in M$ Word format and we would love to bring it into Redmine Wiki for collaborative maintenance. We have not found any tool that will make the conversion. We have found the Open Office extension that produces mediawiki formatted text but Redmine Wiki uses a subset of textile.

Anyone know of a tool that converts TO textile from mediawiki, Word, XDocs, or HTML?

于 2010-12-09T17:33:20.767 回答
0

对于纺织品：

我最近拼凑了一个 HTML 到 Textile 转换器：https ://github.com/cmroanirgo/to-textile

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

于 2017-03-25T03:25:18.880 回答