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

Question

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

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

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

Answer 1

对于 Markdown -> HTML，有 Showdown

StackOverflow 本身使用 Markdown 语言进行问答；你尝试看看它是如何工作的吗？

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

问题 有没有好的 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 解决方案及其缩小（未压缩）的大小和优点/缺点是值得的。缩小代码的压缩大小约为未压缩大小的 50%。归结为：

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

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

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

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

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

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

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

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

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

• mmd.js：800 字节。这是努力制作尽可能最小且仍然可用的解析器的结果。支持一小部分；需要为其量身定制文档。

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

• meltdown：41KB（缩小后无法下载；可能会缩小到约 15KB）。 jQuery 插件； Markdown Extra（表格、定义列表、脚注）。

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

Answer 3

Textile

您可以此处找到 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;}
    //...

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 中的新功能 - 自动删除未关闭的降价标签

Answer 6

无论是否使用 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');
});

Answer 7

Showdown Attacklab-Link 已关闭，因此请使用 https://github.com/coreyti/showdown 进行转换需要:)

Answer 8

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

Answer 9

让我们编写一个简单的 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() 
}

Answer 10

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

Answer 11

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

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

有人找到了 HTML->textile 问题的解决方案吗？我们当前的所有文档都是 M$ Word 格式，我们很乐意将其引入 Redmine Wiki 中进行协作维护。我们还没有找到任何可以进行转换的工具。我们发现 Open Office 扩展可以生成 mediawiki 格式的文本，但 Redmine Wiki 使用的是 Textile 的子集。

有人知道有一种工具可以将 mediawiki、Word、XDocs 或 HTML 转换为TO 纺织品吗？

Answer 12

对于 Textile：

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

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

Answer 13

我发现 karim79 的答案很有用。我稍微修改了一下，所以我想分享我的版本。也许它会对那里的人有所帮助。

我修改了答案，将其从 JavaScript 调整为 PHP（我知道问题没有 PHP 标签）

我还从 while() 更改为 for() 因为：

1. 我不想替换不间断的星号序列，例如“********”
2. 我不想删除不成对的“*”

它仍然不完美，例如它会“加强”两个远距离之间的任何东西分开*，消耗它们两者。但我认为这也是 WhatsApp 的行为方式。

我认为有比我所做的更好的强制循环结束的方法，我只是遵循“如果它没有损坏，就不要修复它”的规则。我很高兴收到建议

    function md2html($text = "") {
        // I constantly check for length of text, instead of assigning the value to a var (which would be more efficient) because the length changes with every replacement! 
        for ($i = 0; $i < strlen($text); $i++) {
            if (($beg = strpos($text,"*",$i)) !== FALSE){
                if (($seq = strspn($text,"*",$beg)) > 1) 
                    $i = $beg + $seq; // skip sequence
                else {
                    if (($end = strpos($text,"*",$beg + 1)) !== FALSE){ // found a second one
                        $length = $end - $beg - 1;
                        $innerText = substr($text,$beg+1,$length);
                        $strongified = "<strong>$innerText</strong>";
                        // following the original answer I should do something like
                        //   $text = substr($text,0,$beg) . $strongified . substr($text,$end+1);
                        // but I assume the following is better:
                        $text = substr_replace($text,$strongified,$beg,$length+2); // adding to length to include both asterisks 
                        $i = $end + 16; // the real position in the string has now increased due to replacement
                    } else
                        $i = strlen($text); // force end of for loop
                }
            } else
                $i = strlen($text);
        }
        for ($i = 0; $i < strlen($text); $i++) {
            if (($beg = strpos($text,"_",$i)) !== FALSE){
                if (($seq = strspn($text,"_",$beg)) > 1)
                    $i = $beg + $seq;
                else {
                    if (($end = strpos($text,"_",$beg + 1)) !== FALSE){
                        $length = $end - $beg - 1;
                        $innerText = substr($text,$beg+1,$length);
                        $italicized = "<em>$innerText</em>";
                        $text = substr_replace($text,$italicized,$beg,$length+2);
                        $i = $end + 10;
                    } else
                        $i = strlen($text);
                }
            } else
                $i = strlen($text);
        }
        return $text;
    }