将Markdown / Textile转换为HTML（以及理想情况下，返回Markdown / Textile）的Javascript

时间：2009-08-23 21:46:19

标签： javascript jquery markdown textile

Markdown / Textile有几个很好的Javascript 编辑器（例如：http://attacklab.net/showdown/，我现在正在使用的那个），但我需要的只是一个转换a的Javascript函数来自Markdown / Textile的字符串 - ＆gt; HTML和返回。

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

编辑：另一种说法是我正在寻找Rails'textilize()和markdown()文字助手的Javascript实现

12 个答案:

答案 0 :(得分：95)

Markdown - ＆gt; HTML，有Showdown

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

好吧，它似乎正在使用MIT许可证下提供的PageDown

问题Is there any good Markdown Javascript library or control?及其答案也可能有所帮助： - ）


当然，完整的编辑并不完全是你所要求的;但他们必须使用某种功能将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 - ＆gt; Markdown，我想事情可能会有点困难......

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

答案 1 :(得分：13)

纺织

您可以找到看似非常精细的Textile here的Javascript实现，另一个there（可能不太好，但有一个很好的转换为您的类型示例页面）。< / p>

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

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

答案 2 :(得分：9)

我正在使用微小的简约脚本 - mmd.js，它只支持Markdown可能性的一个子集，但这可能是所有人都需要的，所以这个小于1kb的脚本是惊人的并且赢了＃ 39;是一个矫枉过正的人。

支持的功能

  • 标题#
  • Blockquotes >
  • 有序列表1
  • 无序列表*
  • 段
  • 链接[]()
  • 图片![]()
  • 内联重点*
  • 内联重点**

不支持的功能

  • 参考文献和ID
  • 逃离Markdown字符
  • 嵌套

答案 3 :(得分：8)

我认为在这里列出JavaScript解决方案以及它们的缩小（未压缩）大小和优点/缺点是值得的。缩小代码的压缩大小约为未压缩大小的50％。归结为如果您需要全面的支持，我建议 pagedown （8KB），因为用户将在您的网站上编辑文档，我推荐自己的缩编（1.3 KB）如果您在未经用户编辑的Web应用程序中显示信息;对于绝大多数情况来说，这是非常小的事情。我相信几乎所有这些都是麻省理工学院的许可证。

为了这个目的，npm还有各种各样的脚本，质量各不相同。

  • showdown：28KB。基本上是黄金标准;它是减记的基础。

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

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

    • 的基础

  • marked：19KB。全面;测试单元测试套件;支持自定义词法分析器规则。

  • micromarkdown：5KB。支持许多功能，但是缺少一些常见的功能，例如使用*的无序列表和一些不像命令代码块那样严格属于规范的常见列表。许多错误，在大多数较长的文档上抛出异常。我认为这是实验性的。

  • nano-markdown：1.9KB。功能范围仅限于大多数文档使用的内容;比micromarkdown更强大但不完美;使用自己非常基本的单元测试。相当强大，但在许多边缘情况下中断。

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

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

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

  • meltdown：41KB（无法下载缩小版;可能会缩小到~15KB）。 jQuery插件; Markdown Extra（表格，定义列表，脚注）。

答案 4 :(得分：4)

use Showdown with or without jQuery很容易。这是一个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');
});

答案 5 :(得分：4)

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

答案 6 :(得分：3)

这不会解决整个请求（它不是编辑器），但textile-js是一个javascript呈现库：https://github.com/borgar/textile-js。可以在http://borgar.github.io/textile-js/

上进行演示

答案 7 :(得分：1)

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

答案 8 :(得分：1)

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

答案 9 :(得分：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() 
}

答案 10 :(得分：0)

您是否查看了Mylyn的Eclipse WikiText库。它将从许多wiki语法转换为xhtml和xdocs / DITA。它看起来很酷。

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

有没有人找到解决HTML-＆gt;纺织品问题的方法？我们所有当前的文档都是M $ Word格式，我们很乐意将它带入Redmine Wiki进行协作维护。我们还没有找到任何可以进行转换的工具。我们找到了Open Office扩展，它生成了mediawiki格式的文本，但Redmine Wiki使用了一个纺织品的子集。

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

答案 11 :(得分：0)

对于纺织品：

我最近修补了HTML to Textile转换器：https://github.com/cmroanirgo/to-textile

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

相关问题
最新问题