将多个文件转换为 HTML（来自 Markdown）？答案

【问题标题】：Converting multiple files into HTML (from Markdown)?将多个文件转换为 HTML（来自 Markdown）？
【发布时间】：2015-07-12 04:26:20
【问题描述】：

我目前正在做一个小项目，我想将几个（或更多）Markdown 文件转换为 HTML，然后将它们附加到主文档中。我希望这一切都发生在客户端。我选择了几个插件，例如Showdown（Markdown 到 HTML 转换器）、jQuery（整体 DOM 操作）和 Underscore（必要时用于简单模板）。我被困在我似乎无法将文件转换为 HTML（转换为其中包含 HTML 的字符串）的地方。

将 Markdown 转换为 HTML 很简单：

var converter = new Showdown.converter();
converter.makeHtml('#hello markdown!');

我不确定如何将文件提取（下载）到代码（字符串？）中。

如何从 URL 中获取文件（该 URL 是 Markdown 文件），通过 Showdown 传递它，然后获取 HTML 字符串？ 顺便说一句，我只使用 JavaScript。

【问题讨论】：

这是 Markdown Pagedown 插件的某个端口吗？
我认为它是从 John Fraser 的 Perl Markdown 实现中移植过来的。您应该查看README。
还不错...但我更喜欢我提到的那个... Markdown Pagedown :) goo.gl/XI3L0

标签： javascript html markdown

【解决方案1】：

您可以获取一个外部文件并使用 ajax 将其解析为字符串。 jQuery 方式更简洁，但原生 JS 版本可能看起来像这样：

var mdFile = new XMLHttpRequest();
mdFile.open("GET", "http://mypath/myFile.md", true);
mdFile.onreadystatechange = function(){
 // Makes sure the document exists and is ready to parse.
 if (mdFile.readyState === 4 && mdFile.status === 200)   
 {
    var mdText = mdFile.responseText; 
    var converter = new showdown.Converter();
    converter.makeHtml(mdText);
    //Do whatever you want to do with the HTML text
 }
}

jQuery 方法：

$.ajax({
  url: "info.md",
  context: document.body,
  success: function(mdText){
    //where text will be the text returned by the ajax call
    var converter = new showdown.Converter();
    var htmlText = converter.makeHtml(mdText);
    $(".outputDiv").append(htmlText); //append this to a div with class outputDiv
  }
});

注意：这假设您要解析的文件在您自己的服务器上。如果文件在客户端（IE 用户文件），您需要采取不同的方法

更新

如果您想要的文件与您在同一台服务器上，上述方法将起作用。如果不是，那么如果您控制远程服务器，则必须研究 CORS，如果不控制，则必须研究服务器端解决方案。 This question 提供了一些跨域请求的相关背景。

【讨论】：

谢谢，但它似乎不起作用。当我想打开this URL 时，什么都没有下载。能否请您展示如何使用 jQuery Ajax 方法？
谢谢，jQuery 的效果好一点，但似乎没有获取文件。当我查看我的网络选项卡时，我看到我试图获取的文件的“状态”失败。 Screenshot。我也收到XMLHttpRequest cannot load http://rafalchmiel.com/post_1.md. Origin null is not allowed by Access-Control-Allow-Origin. 。
好的，我没有意识到您正在向与您当前所在的域不同的域发出此请求。您将需要使用 CORS。

【解决方案2】：

一旦你有了 HTML 字符串，你可以通过简单的调用来追加到任何你想要的 DOM 元素：

var myElement = document.getElementById('myElement');
myElement.innerHTML += markdownHTML;

...markdownHTML 是从 makeHTML 返回的 html。

【讨论】：