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

Posted 2023-02-19

【中文标题】Javascript 将 Markdown/Textile 转换为 HTML（理想情况下，返回 Markdown/Textile）

【英文标题】：Javascript to convert Markdown/Textile to HTML (and, ideally, back to Markdown/Textile)

【发布时间】：2010-11-22 02:57:39

【问题描述】：

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

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

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

【参考方案1】：

对于 Markdown -> HTML，有Showdown

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

嗯，它似乎正在使用PageDown，它在 MIT 许可证下可用

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

当然，一个完整的编辑器并不完全符合您的要求；但他们必须使用某种函数将 Markdown 代码转换为 HTML ；并且，根据这些编辑器的许可，您也许可以重复使用该功能...

其实，如果你仔细看Showdown，在它的代码源(file 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...

【讨论】：

链接似乎已更改。演示在softwaremaniacs.org/playground/showdown-highlight，源代码可以在softwaremaniacs.org/playground/showdown-highlight/showdown.js找到

@John 感谢您的评论；我已经编辑了我的答案以更改链接；-)

不幸的是，这个库似乎不适用于基于 markdown 的链接，即：some text 无法转换。它似乎缺少一些语法，这是不幸的。它还缺少什么？

【参考方案2】：

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

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

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

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

showdown：28KB。拥有全面的 CommonMark 支持，以前是黄金标准；比 Markdown-It 小很多，但速度较慢。它是pagedown的基础。

pagedown：8KB。支持 StackExchange before the CommonMark migration。它非常强大，但缺少表格、定义列表、脚注等。除了 8KB 转换器脚本，它还提供编辑器和清理脚本。

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

marked：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 和散文之间进行转换。根据您需要的插件（拼写检查、语法突出显示、输入清理），文件大小会有所不同。可能使用的服务器端多于客户端。

【讨论】：

谢谢你，真的很有用！我刚刚使用showdown 和fetch（稍微扫描Jake Archibald's "That's So Fetch"）将Markdown 文件读入我的静态HTML 页面并将它们转换为HTML。甜:-)

@DaveEveritt 很棒 - 不要忘记包含 fetch polyfill，除非您的目标是固定浏览器。这将适用于您的目的并且很小：github.com/developit/unfetch

同意，并感谢您的链接，虽然我认为现在只有少数浏览器需要这个 - 三星在新版本中提供支持，我不再针对 IE，尽管我知道许多开发人员需要到……caniuse.com/#feat=fetch

您有计划在drawdown 上添加 功能吗？我尝试自己添加它，但它超出了我的理解范围。 ;( @AdamLeggett 谢谢！

【参考方案3】：

纺织

您可以找到一个看似非常出色的 Textile here 的 Javascript 实现，以及另一个 there（可能不太好，但有一个不错的即用型转换示例页面）。

注意：在我创建链接的第一个实现中存在一个错误：水平条未正确呈现。要修复它，您可以在文件中添加以下代码。

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

【参考方案4】：

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

支持的功能

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

不支持的功能

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

【讨论】：

真的太棒了！

我们可以使用 npm install 安装 mmd.js 吗？真的很想在我的项目中尝试一下。

adamvleggett.github.io/drawdown 并没有那么大，但支持更多的 Markdown 和更大的灵活性。

【参考方案5】：

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');
);

【参考方案6】：

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

【参考方案7】：

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

【讨论】：

对我来说，这个库不能正确解释编号列表（使用#）。

【参考方案8】：

我发现这个问题很有趣，所以我决定开始做一些事情（只替换 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 标签

【参考方案9】：

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

【参考方案10】：

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

【参考方案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 以进行协作维护。我们还没有找到任何可以进行转换的工具。我们发现了生成 mediawiki 格式文本的 Open Office 扩展，但 Redmine Wiki 使用了纺织品的一个子集。

有人知道将转为纺织品从 mediawiki、Word、XDocs 或 HTML 的工具吗？

【讨论】：

是的，见***.com/questions/3711384/…

【参考方案12】：

对于纺织品：

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

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